Sobrescrever CSS no JSF

Existem várias formas de fazer isso.

.extdt-maindiv.rich-extdt-maindiv {
    height: 100px;
}

Outra forma e a melhor, é se tu tem algum elemento antes desta div.
Segue um exemplo abaixo:

<style>
    .teste .extdt-maindiv.rich-extdt-maindiv {
        height: 100px;
    }
</style>
<div class="teste">
    <div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:90%;width:;height:500px"></div>
</div>

[]'s

Que tem várias forma eu sei

O que não entendi foi o porquê de ter botado os dois ‘height’…

Obrigado.

Ao invés de colocar o atributo style, edite os estilos utilizando as classes caso o mesmo estilo se replique em outros locais ou pelo id se for um elemento único na página.

Isso aqui está errado

div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:90%;height:100px;width:;height:500px"

1. Por que o style começa com ;?
2. O width não tem valor
3. O height não tem ; para encerrar a linha

diogozero:

Ao invés de colocar o atributo style, edite os estilos utilizando as classes caso o mesmo estilo se replique em outros locais ou pelo id se for um elemento único na página.

Isso aqui está errado

div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:90%;height:100px;width:;height:500px"

1. Por que o style começa com ;?
2. O width não tem valor
3. O height não tem ; para encerrar a linha

Esse código é o html gerado pelo RichFaces.

raf4ever:

diogozero:

Ao invés de colocar o atributo style, edite os estilos utilizando as classes caso o mesmo estilo se replique em outros locais ou pelo id se for um elemento único na página.

Isso aqui está errado

div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:90%;height:100px;width:;height:500px"

1. Por que o style começa com ;?
2. O width não tem valor
3. O height não tem ; para encerrar a linha

Esse código é o html gerado pelo RichFaces.

diogozero:

raf4ever:

diogozero:

Ao invés de colocar o atributo style, edite os estilos utilizando as classes caso o mesmo estilo se replique em outros locais ou pelo id se for um elemento único na página.

Isso aqui está errado

div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:90%;height:100px;width:;height:500px"

1. Por que o style começa com ;?
2. O width não tem valor
3. O height não tem ; para encerrar a linha

Esse código é o html gerado pelo RichFaces.

Ah, ok. Mas ele gera isso sozinho? Você escreveu alguma coisa no “style” do componente?
Estranho o Richfaces gerar esse código.

Gera sozinho,o que eu escrevi segue abaixo:

<f:verbatim>
	       <style type="text/css">
	   #edt{
	      height: 100px;
	   }
	    
       </style>

Gera sozinho mesmo, por isso acho que você deve utilizar a segunda opção que te falei, utilizando herança em css.

[]'s

Segue como ficou(ainda nao funfou)

<f:verbatim>
	       <style type="text/css">
	   #edt{
	      height: 100px;
	   }
	    
       </style>
       
	   </f:verbatim>

      <div id="xpto" style="height:100px" >
			  	<rich:extendedDataTable style=";width:90%;height:100px" rowClasses="odd-row,even-row"  columnClasses="col" rows="5" id="edt" value="#{eventoController.evento.acoes}" var="edt">

Lembrando que esse div class=“edt” é o código do rich:extendedDataTable

Faz assim… Coloca uma class na sua div com id xpto e um styleClass no seu extendedDataTable. Feito isso insira o style como fiz abaixo.

<div id="xpto" style="height:100px" class="testeDiv">  
            <rich:extendedDataTable styleClass="testeExtended" style=";width:90%;height:100px" rowClasses="odd-row,even-row"  columnClasses="col" rows="5" id="edt" value="#{eventoController.evento.acoes}" var="edt"> 
</div>

<style>
    .testeDiv .testeExtended {
        height: 100px;
    }
</style>

Fiz esse teste,mesmo resultado.

Saida do Firebug:

div class="testeDiv">
<div id="edt" class="extdt-maindiv rich-extdt-maindiv" style=";width:;height:500px">
</div>

Resolvido.

<f:verbatim>
	 <style type="text/css">
	  
	   .extdt-innerdiv{
        top: 0px;
        left: 0px;
        position: absolute;
        overflow-x:auto !important;
        overflow-y:auto !important;
    }

.rich-extdt-maindiv {
        height: auto !important;
    }

.rich-extdt-maindiv, .extdt-innerdiv {
        position: relative !important;
    }

.extdt-outerdiv {
        height: auto !important;
        overflow: visible !important;
    }

.extdt-content {
        height: auto !important;
    }
	   
	    
       </style>
       
	   </f:verbatim>