<rich:dataTable> como deixá-lo sem borda?!

[carllacj]

Galera to querendo usar o componente datatable do richfaces só que sem as bordas, já tentei style e tals, mas não funciona, se alguém souber e puder ajudar agradeço desde já!

[RafaFloripa]

atributo border=0

EDITANDO: agora q eu vi o rich hehehe
seguinte
style=“border:0” deve dar certo

[carllacj]

Obrigada Rafa, mas como dito acima já havia tentado isto e não deu certo! Caso alguém saiba continuo no aguardo!!!

[RafaFloripa]

Carla já tentou colocar border-width:0px?

se não der certo não tenho outras idéias

[alias]

Carla, o que ocorre é que esses componentes malditos do Richfaces utilizam os estilos já inerentes do RichFaces. No caso do rich:datatable o nome da classe css, se nao me falha a memoria, é rich-dt-table.

Entao o que voce deve fazer é criar um arquivo css, incluir lá uma classe com o mesmo nome da que é utilizada pelo componente do RichFaces e montar o estilo do jeito que lhe convem

.rich-dt-table{
   border: 0px;
}

Confirme na documentação do RichFaces como customizar o estilo do componente rich:dataTable (a documentação é bem completa e explica como fazer isso para todos os componentes, lá informa qual é o nome da classe, nao tenho certeza se é rich-dt-table…mas é algo proximo )

E, como sugestao, utilize o Google Chrome ou o FireFox com o plugin FireBug (ou FireDebug? :? )…o Chrome, e esse plugin no FF, fornecem uma funcionalidade para voce inspecionar os elementos HTML da pagina. Aí voce vai conseguir ver direitinho o nome das classes de estilo que os componentes do RichFaces estao usando.

Uma vez tambem precisar alterar o estilo de todos os componentes do RichFaces…isso aí me quebrou um galhao!

[alias]

Ah,achei um exemplo facil aqui…o componente que usei era um rich:dataGrid, mas ele usa os mesmo css do rich:dataGrid…

.rich-table {
	background-color:#FFFFFF;
	
	/*border-left: 0px transparent white !important;
	border-right: 0px transparent white !important;*/
	
	border-top: 0px transparent white !important;
	border-left: 0px transparent white !important;
	border-right: 0px transparent white !important;
	border-bottom: 0px transparent white !important;
	
	vertical-align: middle;
	white-space: nowrap;
	margin-left: 0px important;
	width: 200px;
	
}

Acho que um border:0px daria na mesma que tudo o que eu fiz aí :lol: , mas fica o exemplo…

[EuclidesFilizola]

[quote=alias]Carla, o que ocorre é que esses componentes malditos do Richfaces utilizam os estilos já inerentes do RichFaces. No caso do rich:datatable o nome da classe css, se nao me falha a memoria, é rich-dt-table.

Entao o que voce deve fazer é criar um arquivo css, incluir lá uma classe com o mesmo nome da que é utilizada pelo componente do RichFaces e montar o estilo do jeito que lhe convem

.rich-dt-table{
   border: 0px;
}

Confirme na documentação do RichFaces como customizar o estilo do componente rich:dataTable (a documentação é bem completa e explica como fazer isso para todos os componentes, lá informa qual é o nome da classe, nao tenho certeza se é rich-dt-table…mas é algo proximo )

E, como sugestao, utilize o Google Chrome ou o FireFox com o plugin FireBug (ou FireDebug? :? )…o Chrome, e esse plugin no FF, fornecem uma funcionalidade para voce inspecionar os elementos HTML da pagina. Aí voce vai conseguir ver direitinho o nome das classes de estilo que os componentes do RichFaces estao usando.

Uma vez tambem precisar alterar o estilo de todos os componentes do RichFaces…isso aí me quebrou um galhao![/quote]

Bom dia amigo. Me informa uma coisa, onde você encontrou o “.rich-dt-table” ? Tem como enxerga-lo dentro do código ? ou algo parecido? Tive um problema desses igualzinho e foi resolvido com sua dica. Porém, eu queria saber como eu sei o nome exato e onde encontra-lo.

[mrbbm]

Seguinte, o rich:dataTable renderiza um elemento html table.
Então não adianta você tirar a borda somente na classe do rich:dataTable, ela vai continuar aparecendo nas linhas ou vice-versa.
Para resolver isso de forma simples basta você setar o styleClass do seu rich:dataTable:

<rich:dataTable styleClass=“tabelaSemBorda” …

E adicionar à sua folha de estilos o seguinte código:

table.tabelaSemBorda{
	border:none;
}

table.tabelaSemBorda td{
	border:none;
}

Deve funcionar, tente aí e nos dê um retorno!
:thumbup:

[EuclidesFilizola]

Bem, funcionou na forma que vc me inidicou.

colocar dentro do meu css

isto:

.tabelaSemBorda{

	 border: 0px;
    padding-left: 1em;

}

e dpois utilizar o styleClass desta forma:

<h:graphicImage value="/images/close.png" alt="excluir" styleClass="tabelaSemBorda"/>

mas, ontem eu tentei e não consegui dessa forma colocando qualquer nome dentro do css. Então a solução que eu encontrei, foi utilizar o proprio css do richfaces do datable, assim eu fiz:

css

.rich-dt-table{  
    
    border: 0px;
    padding-left: 1em;  
 }

e nas minhas tabelas foram:

<h:graphicImage value="/images/close.png" alt="excluir" styleClass="rich-dt-table"/>

Na qual rich-dt-table, é proprio do richfaces. Mas deu certo sua dica, porém eu já havia tentado ontem e não tinha conseguido.

Obrigado =D

[mrbbm]

Ok, mas repare que são duas cláusulas diferentes!

Uma trata o elemento TABLE, de acordo com aquela classe;
E a outra trata o elemento TD (dentro do table do item anterior).

Se omitiu alguma das duas o resultado não será satisfatório.
Segue abaixo novamente o código:

table.tabelaSemBorda{   
    border:none;   
}   
  
table.tabelaSemBorda td{   
    border:none;   
}  

Bom, as imagens acho que vêm com borda mesmo!
Se não for usar borda em imagem nenhuma então coloque na sua folha de estilos:

img{
   border:none;
}

Se for somente para uma imagem específica então crie uma classe e a utilize somente nas imagens sem bordas desejadas.

.nomeClasse img{
   border:none;
}

Se a imagem for um link então talvez terá que colocar o mesmo (border:none;), mas para a propriedade “a” da imagem.

O código que eu tinha fornecido (classe: tabelaSemBorda) funciona para as bordas exclusivamente do elemento rich:dataTable.
Não acho interessante chamar classe de tabela para uma imagem, apesar de que pode funcionar, mas fique atento pois ao adicionar alguma outra propriedade você poderá ter problemas no futuro com as imagens. Ex.: se você setar um height para sua classe de tabela e alguma imagem estiver usando essa classe então ela irá se redimensionar de acordo com este height.

Melhor utilizar classe de tabela para tabela, de imagem para imagem e etc.
:thumbup:

[EuclidesFilizola]

Tudo bem. Mas o meu problema era que a imagem ficava com uma borda azul.

desta forma era meu dataTable:

<rich:dataTable id="tabelaFornecedores" style="cursor:pointer;" value="#{pesquisarFornecedor.listaDeFornecedores}" var="listaFornecedores"  onRowMouseOver="this.style.backgroundColor='#C9FDC1'"
				onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"  >
				<f:facet name="header" >
				  <rich:columnGroup>
				  <h:column > <h:outputText value="" /> </h:column>
				  <h:column > <h:outputText value="#{lb.nome}" /> </h:column>
				  <h:column > <h:outputText value="#{lb.cnpj_cpf}" /> </h:column>
				  <h:column><h:outputText value="#{lb.alterar}" /></h:column>
					<h:column><h:outputText value="#{lb.excluir}" /></h:column>
				  </rich:columnGroup>
				</f:facet>
				<h:column >
				
				<h:commandLink id="exibirEndereco" action="FornecedorEnderecoMBean">
							<h:graphicImage value="/images/home.png" alt="editar" styleClass="tabelaSemBorda"/>
				</h:commandLink>
				<h:commandLink id="exibirContaBancaria" action="FornecedorContaBancariaMBean">
						<h:graphicImage value="/images/money.png" alt="editar" styleClass="tabelaSemBorda"/>
				</h:commandLink>
				<h:commandLink id="exibirTelefones" action="FornecedorTelefoneMBean">
						<h:graphicImage value="/images/telephone.png" alt="editar" styleClass="tabelaSemBorda"/>
				</h:commandLink>
				
				 </h:column>
				
				
				<h:column ><h:outputText value="#{listaFornecedores.nomeRazaoSocial}" /> </h:column>
				<h:column ><h:outputText value="#{listaFornecedores.cnpjCpf}" /> </h:column>
				
				<h:column>
				
				<h:commandLink id="editarFornecedor" action="EditarConvenio">
						<h:graphicImage value="/images/notepad.png" alt="editar" styleClass="tabelaSemBorda"/>
				</h:commandLink>
			</h:column>
			
			<h:column>
			
			<h:commandLink onclick="return confirm('Deseja realmente remover o convenio?')" action="#{procurarConvenio.removerConvenio}">
			<h:graphicImage value="/images/close.png" alt="excluir" styleClass="tabelaSemBorda"/>
			</h:commandLink>
			
			</h:column>
				
			</rich:dataTable>

E então eu não estava conseguindo remove-la. Mas agora ta tudo certo.

Obg =D

[mrbbm]

Editei o post anterior. Dê uma lida para entender.
Aconselho você a criar uma classe exclusiva para esta imagem ou para imagens.

.imagemSemBorda img{
   border:none;
}

[Java_Lover]

Testado no RichFaces 3.3.3.Final.
Inclua em seu CSS padrão:

.rich-table, .rich-table-header, .rich-table-headercell, .rich-table-cell, .rich-subtable-cell, .rich-table-footercell, .rich-subtable-footercell { border-width:0px; }

[bruxel]

ai galera desculpa voltar neste topico, mas não encontrei no guj/google

o que preciso, folhas de estilos antigas eu poderia definir por exemplo que todas as minhas TDs teriam por padrao um stilo, isto definido direto no arquivo.css.

assim eu não gostaria precisaria definir em todas as minha imagens o styleClass

<h:graphicImage value="/images/close.png" alt="excluir" styleClass="tabelaSemBorda"/>

queria algo assim, sera que tem como ?

<style>
     h:graphicImage {
        vertical-align: middle;
    }

</style>
<h:graphicImage value="/images/close.png" alt="excluir"/>