Problems with background

Question

Problems with background

Navigation

#1 by (0 votes)

1

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

Here is the code for 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 all the content. How can I solve this? Thank you.

Here is the image of how you are currently filling (I need the blank part to be all blue):

java css jsf front-end primefaces

asked by anonymous 29.11.2016 / 18:06

1 answer

Execute a migration by passing parameters in Laravel 5 NHibernate Mapping

score 0 · Accepted Answer

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

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

so:

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