Estou tentando criar um formulário para Cadastro utilizando o panelGrid só que existe um problema de acordo com o tamanho do Monitor o layout fica ruim, e desconfigura tudo de uma forma que fica ruim para o usuario trabalhar com o cadastro.
Abaixo estou postando o meu código:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich" %>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Criar Requisição de Compra Simples</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid columns="5">
<h:column>
<h:graphicImage url="icon.png"></h:graphicImage>
</h:column>
<h:column><h:outputLabel value="Projeto Finalidade "></h:outputLabel></h:column>
<h:column>
<h:inputText style="width:800px;" id="txtProjetoFinalidade" value="#{requisicaoController.requisicao.projetoFinalidade}" rendered="true"></h:inputText>
</h:column>
<h:column> <h:outputLabel value="Código Centro de Custo"></h:outputLabel></h:column>
<h:column>
<h:selectOneMenu required="true" value="#{requisicaoController.centroCustoSelecionado}">
<f:selectItems value="#{centroCustoController.IDCentroCustos}"/>
</h:selectOneMenu>
</h:column>
</h:panelGrid>
<h:panelGrid columns="8">
<h:column><h:outputLabel value="Data: "></h:outputLabel></h:column>
<h:column>
<h:outputText value="#{requisicaoController.dataAtual}<br/>" escape="false"><f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/> </h:outputText>
</h:column>
<h:column><h:outputLabel value="Area"></h:outputLabel></h:column>
<h:column>
<h:inputText style="width:250px" id="txtArea" value="#{requisicaoController.requisicao.area}" rendered="true"></h:inputText>
</h:column>
<h:column><h:outputLabel value="Requisitante"></h:outputLabel></h:column>
<h:column>
<h:inputText style="width:200px" id="txtRequisitante" value="#{requisicaoController.requisicao.requisitante}" rendered="true"></h:inputText>
</h:column>
<h:column><h:outputLabel value="Responsavel pelo Departamento"></h:outputLabel></h:column>
<h:column>
<h:inputText style="width:200px" id="txtResponsavelDepartamento" value="#{requisicaoController.requisicao.responsavelDepartamento}" rendered="true"></h:inputText>
</h:column>
</h:panelGrid>
<h:panelGrid columns="6">
<h:column><h:outputLabel value="Projeto"></h:outputLabel></h:column>
<h:column>
<h:inputText style="width:180px" id="txtProjeto" value="#{requisicaoController.requisicao.projeto}" rendered="true"></h:inputText>
</h:column>
<h:column><h:outputLabel value="Rúbrica"></h:outputLabel></h:column>
<h:column>
<h:selectOneMenu required="true" value="#{requisicaoController.rubricaSelecionada}">
<f:selectItems value="#{rubricaController.selectRubricas}"/>
</h:selectOneMenu>
</h:column>
<h:column><h:outputLabel value="Item BP"></h:outputLabel></h:column>
<h:column>
<h:selectOneMenu required="true" value="#{requisicaoController.itemDpBPSelecionado}">
<f:selectItems value="#{itemDoBPController.selectItens}"/>
</h:selectOneMenu>
</h:column>
</h:panelGrid>
<h:panelGrid columns="10">
<h:column></h:column>
<h:column>
<h:outputLabel value="Especificação Material"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column></h:column>
<h:column>
<h:outputLabel value="Quantidade"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column></h:column>
<h:column>
<h:outputLabel value="Valor Unitário"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column></h:column>
<h:column>
<h:outputLabel value="Valor Total Compra"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column></h:column>
<h:column>
<h:outputLabel value="Prazo Entrega"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
</h:panelGrid>
<h:panelGrid columns="4">
<h:column>
<h:outputLabel value="Nome Empresa"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column>
<h:outputLabel value="Contato Fornecedor"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column>
<h:outputLabel value="Valor Total Compra"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
<h:column>
<h:outputLabel value="Condição de Pagamento"></h:outputLabel>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
<h:inputText style="width:200px"></h:inputText>
</h:column>
</h:panelGrid>
<h:panelGrid columns="1">
<h:column>
<h:outputLabel value="Justificativa"></h:outputLabel>
<h:inputTextarea style="width:1200px; height:50px;" id="txtJustificativa" value="#{requisicaoController.requisicao.justificativa}"/>
</h:column>
</h:panelGrid>
<h:panelGrid columns="1">
<h:column>
<h:commandButton id="btnCadastrar" value="Cadastrar" action="#{requisicaoController.cadastrar}" rendered="true"></h:commandButton>
</h:column>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
Não sei se é algo para renderizar a pagina, aguardo ajuda por favor.