none
Alinhamento de Campos na View RRS feed

  • Pergunta

  • Boa Tarde, Pessoal

        Estou com dificuldades de ajustar o posicionamento dos campos.  Conforme segue a tela para melhor descrever. Tenho um campo para armazenagem da foto do lado esquerdo, contudo, gostaria que os campos que estão posicionados do lado direito da foto tenha um espaçamento que não fique colocado junto ao campo da foto. Deixo meu código para que possam averiguar qual a melhor solução para que eu possa estar sanando este problema e consequentemente aprender.       Outro fator que tenho feito, os alinhamentos, usando o comando SPAN, pois tive dificuldades de alinhar os demais campos na mesma linha. Caso possam estar orientando-me de algum outro método de posicionar campos na horizontal, agradeço a todos que postarem no auxilio, obrigado

    Código------------------------------------------------------

                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab1">
                                        <div class="formSep">
                                            <div class="span12">
                                                <div class="vcard">
                                                    <div data-fileupload="image" class="fileupload fileupload-new">
                                                        <div style="width: 220px; height: 220px;" class="fileupload-new thumbnail">
                                                            <img src="~/img/FundoImage.png" alt="" />
                                                        </div>
                                                        <div style="width: 220px; height: 220px; line-height: 220px;"
                                                             class="fileupload-preview fileupload-exists thumbnail">
                                                        </div>

                                                        <br />

                                                        <div class="form-horizontal">
                                                            <div class="row-fluid">
                                                                <div class="span2">
                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioId)
                                                                    @Html.TextBoxFor(model => model.T_FrmCadFuncionarioId, new { style = "width:120px;", @class = "form-control", @readonly = "readonly" })
                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioId)
                                                                </div>

                                                                <div class="row">
                                                                    <div class="editor-label col-md-4">
                                                                        @Html.LabelFor(model => model.T_FrmCadFuncionarioNome)
                                                                        @Html.TextBoxFor(model => model.T_FrmCadFuncionarioNome, new { style = "width:550px;" })
                                                                        @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioNome)
                                                                    </div>

                                                                    <div class="row">
                                                                        <div class="span3">
                                                                            @Html.LabelFor(model => model.T_FrmCadFuncionarioEndereco)
                                                                            @Html.TextBoxFor(model => model.T_FrmCadFuncionarioEndereco, new { style = "width: 340px" })
                                                                            @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEndereco)
                                                                        </div>
                                                                        <div class="span3">
                                                                            @Html.LabelFor(model => model.T_FrmCadFuncionarioNumero)
                                                                            @Html.TextBoxFor(model => model.T_FrmCadFuncionarioNumero, new { style = "width:80px" })
                                                                            @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioNumero)
                                                                        </div>

                                                                        <div class="span3">
                                                                            @Html.LabelFor(model => model.T_FrmCadFuncionarioCep)
                                                                            @Html.TextBoxFor(model => model.T_FrmCadFuncionarioCep, new { style = "width: 90px" })
                                                                            @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioCep)
                                                                        </div>

                                                                        <div class="row">

                                                                            <div class="span3">
                                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioBairroNome)
                                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioBairroNome, new { style = "width: 240px" })
                                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioBairroNome)
                                                                            </div>

                                                                            <div class="span3">
                                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioCidadeNome)
                                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioCidadeNome, new { style = "width: 240px" })
                                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioCidadeNome)
                                                                            </div>

                                                                            <div class="span2">
                                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioEstado)
                                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioEstado, new { style = "width:40px" })
                                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEstado)
                                                                            </div>

                                                                            <div class="row-fluid">
                                                                                <div class="span2">
                                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioEstadoCivil)
                                                                                    @Html.TextBoxFor(model => model.T_FrmCadFuncionarioEstadoCivil, new { style = "width: 100px" })
                                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEstadoCivil)
                                                                                </div>

                                                                                <div class="span2">
                                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioSexo)
                                                                                    @Html.TextBoxFor(model => model.T_FrmCadFuncionarioSexo, new { style = "width: 80px" })
                                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioSexo)
                                                                                </div>

                                                                                <div class="span2">
                                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioPassaporte)
                                                                                    @Html.TextBoxFor(model => model.T_FrmCadFuncionarioPassaporte, new { style = "width:100px" })
                                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioPassaporte)
                                                                                </div>

                                                                                <div class="span2">
                                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioDataNascto)
                                                                                    @Html.EditorFor(model => model.T_FrmCadFuncionarioDataNascto, new { style = "width:30px" })
                                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioDataNascto)
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                            </div>
                                                        </div>

                                                        <div class="row-fluid">
                                                            <div class="span4">
                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioFoto)
                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioFoto, new { @class = "file-loading", @type = "file", @name = "file" })
                                                            </div>
                                                        </div>

                                                        <div class="row-fluid">
                                                            <div class="span3">
                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioPaisNome)
                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioPaisNome, new { style = "width: 250px" })
                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioPaisNome)
                                                            </div>

                                                            <div class="span3">
                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioEmpresaTrabalha)
                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioEmpresaTrabalha, new { style = "width: 250px" })
                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEmpresaTrabalha)
                                                            </div>

                                                            <div class="span2">
                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioEmpresaTelefone)
                                                                @Html.TextBoxFor(model => model.T_FrmCadFuncionarioEmpresaTelefone, new { style = "width:100px" })
                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEmpresaTelefone)
                                                            </div>

                                                            <div class="span3">
                                                                @Html.LabelFor(model => model.T_FrmCadFuncionarioEmpresaFuncao)
                                                                @Html.EditorFor(model => model.T_FrmCadFuncionarioEmpresaFuncao, new { style = "width:60px" })
                                                                @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioEmpresaFuncao)
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                             
    • Editado AR_62 domingo, 11 de outubro de 2015 00:37
    domingo, 11 de outubro de 2015 00:04

Respostas

  • Ola Pessoal, com um simples comando consegui alinhar os campos da esquerda do quadro da foto com apenas :                                                             <span>       </span>

    Código após a inserção desta linha

    <div class="form-horizontal">
                                                            <div class="row-fluid">
                                                                <span>       </span>
                                                                <div class="span2">
                                                                    @Html.LabelFor(model => model.T_FrmCadFuncionarioId)
                                                                    @Html.TextBoxFor(model => model.T_FrmCadFuncionarioId, new { style = "width:120px;", @class = "form-control", @readonly = "readonly" })
                                                                    @Html.ValidationMessageFor(model => model.T_FrmCadFuncionarioId)
                                                                </div>


    • Marcado como Resposta AR_62 terça-feira, 13 de outubro de 2015 20:37
    terça-feira, 13 de outubro de 2015 20:36