Mudança de layout dependendo do navegador e/ou tamanho de tela

gilmar_soares · Janeiro 19, 2011, 11:34am

Bom,

Como sempre venho pedir ajuda de vcs…
Estou concluindo uma aplicação web para requisições de compras…
Fiz um formulario com muitos campos, conforme necessidade da empresa,
o que acontece é que no firefox do meu Linux, ou mesmo Chrome abre certinho
o formulario conforme desejado, mas nas estações com windows xp e o IE 8
ele desconfigura minha aplicação deixando totalmente bagunçado o formulario.
Então a duvida é se existe algo para fixar este formulario onde não exista mudanças
indiferentemente do navegador ou plataforma.

Segue fonte abaixo:

&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %&gt;
&lt;%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@taglib uri="http://richfaces.org/rich" prefix="rich" %&gt;
&lt;%@taglib uri="http://richfaces.org/a4j" prefix="a4j" %&gt;

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;title&gt;Criar Requisição de Compra Simples&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;f:view&gt;
		&lt;h:form&gt;
                    &lt;h:panelGrid columns="5"&gt;
                        &lt;h:column&gt;
                            &lt;h:graphicImage url="logo.png"&gt;&lt;/h:graphicImage&gt;
                        &lt;/h:column&gt;
                        &lt;h:column&gt;
                            &lt;h:outputLabel value="Projeto Finalidade"&gt;&lt;/h:outputLabel&gt;
                        &lt;/h:column&gt;
                        &lt;h:column&gt;
                            &lt;h:inputText style="width:800px;" id="txtProjetoFinalidade" value="#{requisicaoController.requisicao.projetoFinalidade}" rendered="true"&gt;&lt;/h:inputText&gt;
                        &lt;/h:column&gt;
                        &lt;h:column&gt; &lt;h:outputLabel value="Código Centro de Custo"&gt;&lt;/h:outputLabel&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:selectOneMenu required="true" value="#{requisicaoController.centroCustoSelecionado}"&gt;
                                    &lt;f:selectItems value="#{centroCustoController.IDCentroCustos}"/&gt;
                                &lt;/h:selectOneMenu&gt;
                            &lt;/h:column&gt;
                    &lt;/h:panelGrid&gt;
                    &lt;h:panelGrid columns="8"&gt;
                            &lt;h:column&gt;&lt;h:outputLabel value="Data: "&gt;&lt;/h:outputLabel&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputText value="#{requisicaoController.dataAtual}&lt;br/&gt;" escape="false"&gt;&lt;f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/&gt; &lt;/h:outputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;h:outputLabel value="Area"&gt;&lt;/h:outputLabel&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:inputText style="width:225px" id="txtArea" value="#{requisicaoController.requisicao.area}" rendered="true"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;h:outputLabel value="Requisitante"&gt;&lt;/h:outputLabel&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:inputText style="width:225px" id="txtRequisitante" value="#{requisicaoController.requisicao.requisitante}" rendered="true"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;h:outputLabel value="Responsavel pelo Departamento"&gt;&lt;/h:outputLabel&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:inputText style="width:225px" id="txtResponsavelDepartamento" value="#{requisicaoController.requisicao.responsavelDepartamento}" rendered="true"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                        &lt;h:panelGrid columns="10" border="0"&gt;
                            &lt;h:column&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Especificação Material"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Quantidade"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Valor Unitário"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Valor Total Compra"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;&lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Prazo Entrega"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                        &lt;h:panelGrid columns="1"&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Observações"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputTextarea style="width:1250px; height:50px;" id="txtObservacoes"/&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                        &lt;h:panelGrid columns="4" border="0"&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Nome Empresa"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px "&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Contato Fornecedor"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Valor Total Compra"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Condição de Pagamento"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                                &lt;h:inputText style="width:200px"&gt;&lt;/h:inputText&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                        &lt;h:panelGrid columns="1" border="0"&gt;
                            &lt;h:column&gt;
                                &lt;h:outputLabel value="Justificativa"&gt;&lt;/h:outputLabel&gt;
                                &lt;h:inputTextarea style="width:1250px; height:50px;" id="txtJustificativa" value="#{requisicaoController.requisicao.justificativa}"/&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                        &lt;h:panelGrid columns="1"&gt;
                            &lt;h:column&gt;
                                &lt;h:commandButton id="btnCadastrar" value="Cadastrar" action="#{requisicaoController.cadastrar}" rendered="true"&gt;&lt;/h:commandButton&gt;
                            &lt;/h:column&gt;
                        &lt;/h:panelGrid&gt;
                &lt;/h:form&gt;
	&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;

Aguardo, e Obrigado.

system · Dezembro 30, 2015, 6:46am

Mudança de layout dependendo do navegador e/ou tamanho de tela

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI