Background problems

Asked

Viewed 61 times

1

I’m having trouble filling my background with a specific color, in this case, blue.

Follow the code of my application:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <style>
        .Bimage{background-color: gray;}
        body {background-color: #a8d9dc;}
    </style>
</h:head>
<h:body>
    <h:form id="form">
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100">

                <p:outputLabel>Bem vindo ao sistema CALC-ME, </p:outputLabel>
                <p:outputLabel value=" #{usuarioBean.usuario.nome}"></p:outputLabel>
                <p:graphicImage url="/imgs/logo-editada.jpg" width="140px"
                    height="70px" style="position: absolute; bottom:10px; left:610px;"></p:graphicImage>
                <p:commandLink value="Sair"
                    style="position: absolute; bottom:10px; left:1110px;" action="#{usuarioBean.encerraSessao()}"></p:commandLink>
            </p:layoutUnit>
            <p:layoutUnit position="west" size="200" style="background: #a8d9dc;">
                <p:outputLabel>Resumo:</p:outputLabel>
                <br />
                <h:panelGrid id="pLogin" cellspacing="10" styleClass="Bimage" columns="3"
                    style="position: absolute;top:140px; left: 450px;">

                </h:panelGrid>
            </p:layoutUnit>

            <p:layoutUnit position="center" size="100"
                style="background: #a8d9dc;">
                <h:panelGrid id="pLogin2" cellspacing="10" 
                    bgcolor="blue" columns="3"
                    style="position: absolute;top:140px; left: 250px;">

                    <p:outputLabel>Rendas:</p:outputLabel>
                    <p:inputText  style="color:#03d635;" readonly="true" value="#{rendaBean.retornaRenda()}" />
                    <br />
                    <p:outputLabel>Despesas:</p:outputLabel>
                    <p:inputText style="color:#e90202;" readonly="true"
                        value="#{despesaBean.retornaDespesa()}" />
                    <br/>
                    <p:outputLabel>Total Liquido:</p:outputLabel>
                    <p:inputText style="color:#2d43e7" readonly="true"
                        value="#{usuarioBean.calculaTotalLiquido()}" />
                    <br/>
                    <br></br>
                    <p:outputLabel>Poupança VAR 1:</p:outputLabel>
                    <p:inputText  style="color:#03d635;" readonly="true" value="#{poupancaBean.retornaPoupancaVar1()}" />       
                    <br />
                    <p:outputLabel>Poupança VAR 2:</p:outputLabel>
                    <p:inputText  style="color:#03d635;" readonly="true" value="#{poupancaBean.retornaPoupancaVar2()}" />       
                    <br />

                </h:panelGrid>
            </p:layoutUnit>

    <p:layoutUnit position="east" size="100" closable="true"
                collapsible="true">

                </p:layoutUnit>

            <p:dock position="bottom">
                <p:menuitem value="Home" icon="/imgs/home.jpg"
                    url="/faces/inicio.xhtml" />
                <p:menuitem value="Rendas" icon="/imgs/rendas.jpg"
                    url="/faces/cadastroRenda.xhtml" />
                <p:menuitem value="Despesas" icon="/imgs/despesa.jpg"
                    url="/faces/cadastroDespesa.xhtml" />
                <p:menuitem value="Poupança" icon="/imgs/unnamed.jpg" url="/faces/cadastroPoupanca.xhtml" />
                <p:menuitem value="Usuário" icon="/imgs/usuario.jpg" url="/faces/Usuario.xhtml" />
            </p:dock>
            <p:outputLabel></p:outputLabel>
        </p:layout>
    </h:form>
</h:body>
</html>

However, it just fills the edges of the layout, I needed to fill in all the content. How can I fix this? Thanks.

Follow the image of how it is currently filling (I need the white part to be all blue):

inserir a descrição da imagem aqui

css jsf primefaces front-end java

  • you already tried to set the opacity for these layoutUnit?

1 answer

0


Instead of simply using "style" put css code between tags <h:outputStyles></h:outputStylesheet> which are the outputs for jsf to recognize the stylesheet. Replace that: 

<h:head>
<style>
    .Bimage{background-color: gray;}
    body {background-color: #a8d9dc;}
</style>

therefore: 

<h:head>
<h:outputStyles>
    .Bimage{background-color: gray;}
    body{background:blue;}//ou a cor que desejar
</h:outputStylesheet>

  • Explain better what the code does, so it’s better for those who implement it.

Browser other questions tagged css jsf primefaces front-end java

You are not signed in. Login or sign up in order to post.