Discussoes de Programacao e Tecnologia

Customização do estilo rich:modalPanel

7 respostas
cs.santos0
cs.santos0

Iai pesual, blz?

to tentando customizar um rich:modalPanel aki…porem nao esta rolando…segue em anexo meu modal:

o que eu preciso, é tirar essa parte branca dentro do modal em volta dos meus componentes…ou seja, esse topo vermelho e esse rodape cinza, devem ficar colados nas bordas do modal panel…e tb preciso arrumar a imagem de fechar que esta menor que a borda…

ja tentei editar pelo que indicam na doc…tipo acrescentando um arquivo css…adicionando uma classe .rich-mpnl-body…mas nao muda…

alguem poderia me ajudar?

Obrigado

2010/1/22/9820e79168ca376aeb1560ba03e3e488_28022.jpg_836×544 38.4 KB

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

7 Respostas

aikeda
aikeda

Posta o código desse modal e se possívle o seu CSS em anexo.

cs.santos0
cs.santos0

certo...

segue o modal:

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<%@taglib prefix="rich" uri="http://richfaces.org/rich"%>

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
		href="../../Css/data_table_style.css" />
<style type="text/css">
<!--
.topo {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #E51937;
}

.rodape {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #666;
}

.fonteTitulo {
	font-size: 14px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

.combo {
	border: 1px solid #66BB49;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.Minusculo {
	border: 0px;
	background-image: url(../../Img/fundo_input_Minusculo.jpg);
	background-repeat: no-repeat;
	height: 20px;
	padding: 3px;
	font-size: 11px
}

.Menor {
	border: 0px;
	background-image: url(../../Img/fundo_input_menor.gif);
	background-repeat: no-repeat;
	height: 20px;
	padding: 3px;
	font-size: 11px
}
-->
</style>
</head>
<body>
<jsp:include page="/pages/modal/modalGeneric.jsp" />

<rich:modalPanel id="pnlCadLinha" autosized="true" width="825"
	height="250">
	<f:facet name="header">
		<rich:spacer height="12" />
	</f:facet>
	<f:facet name="controls">
		<a4j:commandLink action="#"
			onclick="Richfaces.hideModalPanel('pnlCadLinha');return false;">
			<h:graphicImage value="../../images/close.png" title="Fechar"
				style="cursor:pointer;border-style:none;"
				styleClass="border-style:none" />
		</a4j:commandLink>
	</f:facet>

	<table width="100%" border="0" cellspacing="0" cellpadding="0"
		class="topo">
		<tr>
			<td width="1%"><a href="#"></a></td>
			<td width="33%">&nbsp;</td>
			<td width="66%">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="3%"><img src="../../ImgMenu/fav_boxesandarrows.png"
						width="14" height="14" /></td>
					<td width="97%"><span class="fonteTitulo">&nbsp;Cadastro
					de Linhas</span></td>
				</tr>
			</table>
			</td>
		</tr>
	</table>

	<h:form id="idFormMarcav" rendered="true">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td rowspan="4">&nbsp;</td>				
			</tr>
			<tr>
				
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td height="291">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="29%" height="259"
							background="../../Img/mapfre_background_menor2.png">&nbsp;</td>
						<td width="71%" valign="top">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="22%">
								<div align="right">Linha:&nbsp;</div>
								</td>
								<td width="78%"><select name="select6" class="combo"
									id="select6" style="width: 180px;">
									<option>Selecione...</option>
								</select></td>
							</tr>
							<tr>
								<td>
								<div align="right">Localidade:&nbsp;</div>
								</td>
								<td><select name="select2" class="combo" id="select2"
									style="width: 180px;">
									<option>Selecione...</option>
								</select></td>
							</tr>
							<tr>
								<td>
								<div align="right">DDD:&nbsp;</div>
								</td>
								<td><input name="textfield4" type="text" class="Minusculo"
									id="textfield4" value="10" size="4" maxlength="2" /></td>
							</tr>
							<tr>
								<td>
								<div align="right">Telefone:&nbsp;</div>
								</td>
								<td><input name="textfield62" type="text" class="Menor"
									id="textfield62" value="([telefone removido]" size="17" /></td>
							</tr>
							
							<tr>
								<td>
								<div align="right">Situação:&nbsp;</div>
								</td>
								<td><select name="select7" class="combo" id="select7"
									style="width: 180px;">
									<option>Selecione...</option>
								</select></td>
							</tr>
							<tr>
								<td>
								<div align="right">Custo:&nbsp;</div>
								</td>
								<td><select name="select9" class="combo" id="select9"
									style="width: 180px;">
									<option>Selecione...</option>
								</select></td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="30%">
										<fieldset><legend>Status</legend> <input
											type="radio" value="" /> Disponível<br />
										<input type="radio" value="" /> Em uso</fieldset>
										</td>
										<td width="70%">&nbsp;</td>
									</tr>
									<tr>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
								</table>
								</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="49%" align="right">
						<div align="right"><a4j:commandButton id="idSalvarMarca"
							action="#" image="../../Img/bt_Salvar.png"
							style="width:65;height:18;cursor:hand">
							<a4j:support event="onclick" action="#{marcaHandler.save}"
								oncomplete="#{messageBean.onComplete}"
								reRender="idMarcaDesc,pnlError,pnlAlert" />
						</a4j:commandButton></div>
						</td>
						<td width="50%"><a4j:commandButton id="idLimparMarca"
							action="#" image="../../Img/bt_Limpar.png" reRender="idMarcaDesc"
							style="width:65;height:18;cursor:hand" /> <a4j:support
							event="onclick" action="#{marcaHandler.limpar}" /></td>
					</tr>
				</table>
				</td>
			</tr>
		</table>
	</h:form>

	<table width="100%" border="0" cellspacing="0" cellpadding="0"
		class="rodape">
		<tr>
			<td width="1%"><a href="#"></a></td>

		</tr>
	</table>

</rich:modalPanel>
</body>
</html>

segue o css:

/* 
Document   : data_table_style
Created on : Jul 18, 2009, 8:20:32 PM
Author     : Ciro Santos
Description:
Purpose of the stylesheet follows.
*/
.linha1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black;
	/*background-color: #F8F5D1;*/
	background-color: #FFFFFF;
}

.linha2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black;
	background-color: #EEEEEE;
}

.rich-table-footer {
	background-color: #F1EEE9;
}

.active-row {
	background-color: #e3e0dc;
}

.rich-table-header {
	color: white !important;
	background-color: #E51937 !important;
}

.my-header {
	color: white !important;
	background-color: #E51937 !important;
}

.rich-table-header-continue {
	color: white !important;
	background-color: #E51937 !important;
}

.rich-table-subheader {
	color: white !important;
	background-color: #E51937 !important;
}

.rich-table-adjustments {
	/*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;
}

.rich-mpnl-body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.rich-mpnl-content {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
aikeda
aikeda

O seu problema não é de margem(margin), mas sim de espaçamento (padding).
Em relação a imagem no header, ou diminua o tamanho da figura ou então aumente o espaçamento do rich:spacer.

...
.rich-mpnl-body {	
	padding:0 0 0 0;  /* Adicione essa linha */

	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
...

Abs,
André

cs.santos0
cs.santos0

funcionou cara…vlw

com relação ao botao de fechar eu ja tentei as duas coisas e ta dando diferença…

e para eu mudar a cor do header desse azul para um cinza…

eu tentei:

.rich-mpnl-header{

background-color: #FF0000 !important;

}

mas nao rolou…

vc sabe?

aikeda
aikeda
Se você reparar bem, o fundo do header tem um leve gradiente, logo isso só pode ser uma imagem. Pra anular a imagem do Richfaces, defina o background-image para none: 
.rich-mpnl-header{
background-image:none; /* E nem precisa do !important  */

background-color: #FF0000 !important;
}
cs.santos0
cs.santos0

puts cara…funcionou certinho…

o unico embaçado é que na aplicacao no trampo essa barra do header aparece tipo com um padding…ele nao cola esse header no topo…é bem estranho…vc ja passou por algo assim?

abracos

aikeda
aikeda

[Opa foi mal a demora]
Só usei o richfaces em um projeto da faculdade, mas nunca cheguei a usar o modal.
Mas não acha melhor tirar o header logo não?

Criado 22 de janeiro de 2010
Ultima resposta 27 de jan. de 2010
Respostas 7
Participantes 2

Topicos relacionados

Compilar e executar uma classe java pelo prompt do windows 13 respostas [RESOLVIDO] Como executar função JavaScript após página carregada 13 respostas Java.lang.OutOfMemoryError: Java heap space - Como resolver? 11 respostas Como consultar CPF na Receita Federal usando Web Service? 22 respostas Como acessar localhost de forma externa? [RESOLVIDO] 13 respostas
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo