6

Num calendário, preciso colocar ao lado dele um label. Acontece que o label está ficando em baixo dele. Se abro outra o label fica no extremo direito, e preciso exatamente ao lado.

Aqui a table:

<tr>
    <td style="text-align:right">Data Exclusão:</td>
    <td> <cc1:Calendario id="calDataExclusao" runat="server" AutoPostBack="true" OnTextChanged="calDataExclusao_TextChanged" />
    <label for="calDataExclusao" id="lblPrazoSubsAns" style="color: red"></label>
    <asp:HiddenField ID="hidQtdeDiasExclusao" runat="server" />
    <asp:HiddenField ID="hidIndLEI13003" runat="server" />
    </td>
  </tr>

O label #lblPrazoSubsAns deveria ficar ao lado do calendário e está em baixo conforme imagem(o label está em vermelho). deveria ficar ao lado do calendário data exclusão:

inserir a descrição da imagem aqui

Essa é a função js que escreve no label:

function montaDataSubstituicaoPrestador(dt_exclusao) {

            var prazoSubPrestador = 60;

            var arrData = dt_exclusao.split('/');

            var exclusaoFormatada = arrData[1] + '-' + arrData[0] + '-' + arrData[2];
            var dias = parseInt(prazoSubPrestador);
            var novaData = new Date(arrData[2], arrData[1] - 1, arrData[0]);

            novaData.setDate(novaData.getDate() + dias);

            hoje = new Date(novaData)
            dia = hoje.getDate()
            mes = hoje.getMonth()
            ano = hoje.getFullYear()
            if (dia < 10)
                dia = "0" + dia

            if ((mes + 1) < 10)
                mes = "0" + (mes + 1);

            if (ano < 2000)
                ano = "19" + ano

            var dt = dia + "/" + (mes) + "/" + ano;

            document.getElementById('lblPrazoSubsAns').innerHTML = "Prazo de substituição: " + dt;

Inspecionando o elemento, achei isso:

<img id="cphSisamil_ctl09" title="Selecionar data" 
onmouseover="this.style.background='red'" 
onmouseout="this.style.background=''" 
src="/WebResource.axd?d=Ul-3xiPb1B4J0WWLRIfpYACSRxlLXH3ITbNxp7Css3e_oMUxdaIVbbuJR6SblAROTBzgpsmR0Qp77syLZ7ErNWN0KNRq2W0aApS95jg8W9TWJs49S5547dtEyUZBzBIFqVmIP9vRGWQcAvwdBZi4qacmPWLlwkepIxwXLLDJaD7tRqIeinn1kdWvZsstnmfL0&amp;t=635845770857885677" 
style="border: 1px solid red; cursor: pointer;" "="">

Pegando a sugestão do RBoschini, quase deu certo. Ficou assim: inserir a descrição da imagem aqui

Quebrou o layout, conforme imagem acima.

Aqui está meu html completo, como eu disse:

<%@ Page Title="" Language="C#" MasterPageFile="~/Sisamil.Master" AutoEventWireup="true" CodeBehind="prs0101.aspx.cs" Inherits="Amil.Sisamil.UI.Web.Modulos.Odonto.Forms.odo_prs.prs0101" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register assembly="Amil.Sisamil.UI.WebControls" namespace="Amil.Sisamil.UI.WebControls" tagprefix="cc1" %>
<%@ Register src="~/Modulos/Odonto/Forms/gen_odo/buscaPrestador.ascx" tagname="buscaPrestador" tagprefix="uc1" %>
<%@ Register Src="~/Modulos/Odonto/Forms/gen_odo/listaOperadoras.ascx" TagName="listaOperadora" TagPrefix="uc2" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cphSisamil" runat="server">
    <asp:UpdatePanel ID="upPrincipal" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <uc1:buscaPrestador ID="buscaPrestador1" runat="server" OnSelecionaPrestador="buscaPrestador1_OnSelecionaPrestador" DescricaoLableComponente=""/>
            <table id="tblOperadora" runat="server" visible="false" cellpadding="0" cellspacing="0" width="100%" border="0">
                <tr>
                    <td width="15%" style="text-align:right">Operadora:</td>
                    <td width="85%">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td><uc2:listaOperadora ID="listaOperadora1" runat="server" AutoPostBack="true" Visible="false" ExibirDescricao="false" OnSelecionaOperadora="listaOperadora1_OnSelecionaOperadora"/></td>
                                <td style="padding-left:5px"><asp:LinkButton ID="linkIndicado" runat="server" Text="Prestador indicado como substituto" ForeColor="Red" Visible="false" OnClick="linkIndicado_OnClick"></asp:LinkButton></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div id="dvDados" runat="server" visible="false">
                <table width="100%">
                    <tr>
                        <td style="width:30%; text-align:right">Motivo:</td>
                        <td style="width:70%"><asp:DropDownList ID="ddlMotivoExclusao" runat="server" Width="400px" OnSelectedIndexChanged="ddlMotivoExclusao_OnSelectedIndexChanged" AutoPostBack="true"></asp:DropDownList></td>
                    </tr>
                    <tr id="trDataNotificacaoExclusaoVoluntaria" runat="server" visible="false">
                        <td style="text-align:right">Data Notificação da Exclusão Voluntária:<span style="color:Red">*</span></td>
                        <td><cc1:Calendario id="calDataNotificacaoExclusaoVoluntaria" runat="server" AutoPostBack="false" /></td>
                    </tr>
                    <tr style="white-space:nowrap;width:auto;word-break:break-all;">
                        <td style="text-align:right">Data Exclusão:</td>
                        <td align="left">
                            <%--<cc1:Calendario id="calDataExclusao" runat="server" AutoPostBack="true" OnTextChanged="calDataExclusao_TextChanged" />
                            <label for="calDataExclusao" id="lblPrazoSubsAns" style="color: red">--%>
                            <ul style="float: left;">
                                <li style="display:inline-table;"><cc1:Calendario id="calDataExclusao" runat="server" AutoPostBack="true" OnTextChanged="calDataExclusao_TextChanged" /></li>
                                <li style="display:inline-table;"><label for="calDataExclusao" id="lblPrazoSubsAns" style="color: red"></label></li>
                            </ul>
                            <asp:HiddenField ID="hidQtdeDiasExclusao" runat="server" />
                            <asp:HiddenField ID="hidIndLEI13003" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right">Data Limite Realização:</td>
                        <td><cc1:Calendario id="calDataLimiteRealizacao" runat="server" AutoPostBack="false" /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right">Data Limite Apresentação:</td>
                        <td><cc1:Calendario id="calDataLimiteApresentacao" runat="server" AutoPostBack="false" /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right">Data Limite Reapresentação:</td>
                        <td><cc1:Calendario id="calDataLimiteReapresentacao" runat="server" AutoPostBack="false" /></td>
                    </tr>
                    <tr>
                        <td valign="top" style="text-align:right">Observação:</td>
                        <td><asp:TextBox ID="txtObservacao" runat="server" width="400px" TextMode="MultiLine" Height="60px"/></td>
                    </tr>
                    <tr>
                        <td style="text-align:right">Emite Carta de Descredenciamento:</td>
                        <td><asp:CheckBox ID="ckbDescredenciamento" runat="server" /></td>
                    </tr>
                </table>
                <br />
                <asp:CheckBox ID="chkRedesDataFim" runat="server" Text="Redes com Data Fim" AutoPostBack="true" Visible="false" OnCheckedChanged="chkRedesDataFim_OnCheckedChanged" />
                <br />
                <fieldset id="fdsPrestadorRede" runat="server" style="padding:10px 10px 10px 10px">
                    <legend style="padding-bottom:8px"> Redes </legend>
                    <asp:UpdatePanel ID="upGrid" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                                <asp:HiddenField ID="hidQtdeRede" runat="server" />
                                <asp:GridView ID="gridRedePrestador" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="LightGray" BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Width="100%">
                                    <Columns>
                                        <asp:TemplateField ItemStyle-Height="8%" HeaderStyle-CssClass="gridHeaderStyle" HeaderText="Trocar Substituto" ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkTrocarSubstituto" runat="server" ToolTip="Trocar Substituto" Enabled="false" AutoPostBack="true" OnCheckedChanged="chkTrocarSubstituto_OnCheckedChanged" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField ItemStyle-Height="10%" ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkSelecaoRede" runat="server" ToolTip="Selecionar Rede" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="gridHeaderStyle" HeaderText="Rede" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="25%">
                                            <ItemTemplate>
                                                <asp:Label ID="lblRedePrestador" runat="server" Text='<%# Eval("Rede") %>'></asp:Label>
                                                <asp:HiddenField ID="hidCodigoRede" runat="server" Value='<%# Eval("cod_rede") %>' />
                                                <asp:HiddenField ID="hidDataExclusao" runat="server" Value='<%# Eval("dt_exclusao") %>' />
                                                <asp:HiddenField ID="hidCodPrestadorSub" runat="server" Value='<%# Eval("cod_prestador_sub") %>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="gridHeaderStyle" HeaderText="Prestador Substituto" ItemStyle-Width="25%">
                                            <ItemTemplate>
                                                <table>
                                                    <tr>
                                                        <td><uc1:buscaPrestador ID="buscaPrestadorGrid" runat="server" Width="240px" ExibirBotaoLimpar="false" ExibirOpcaoAdicionar="false" OnBuscaPrestador="buscaPrestadorGrid_OnSelecionaPrestador" DescricaoLableComponente="null"/></td>
                                                        <td><asp:ImageButton ID="btDetalhesExclusao" runat="server" ImageUrl="~/Imagens/folha.gif" BorderStyle="None" ToolTip="Detalhe das informações do registro exclusão" OnClick="btDetalhesExclusao_OnClick" Visible="false" /></td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="gridHeaderStyle" HeaderText="Mesma Região" ItemStyle-Width="14%" ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                                <asp:Label ID="lblMesmaRegiao" runat="server" ForeColor="Green"></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="gridHeaderStyle" ItemStyle-Width="18%" ItemStyle-HorizontalAlign="Center">
                                            <HeaderTemplate>
                                                <table width="100%">
                                                    <tr>
                                                        <td class="gridHeaderStyle">Status</td>
                                                        <td><asp:ImageButton ID="btValidar" runat="server" ImageUrl="~/Imagens/validar.png" OnClick="btValidar_OnClick" /></td>
                                                    </tr>
                                                </table>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="lblStatus" runat="server" ForeColor="Green"></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <EditRowStyle CssClass="gridEditRowStyle" />
                                    <HeaderStyle CssClass="gridHeaderStyle" />
                                    <RowStyle CssClass="gridRowStyle" />
                                    <SelectedRowStyle BackColor="#D9F3FF" />
                                    <AlternatingRowStyle CssClass="gridAlternatingRowStyle" />
                                </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </fieldset>
            </div>
            <asp:ModalPopupExtender ID="mpeSubstitutoDe" runat="server" CancelControlID="btnFecharSubstitutoDe" TargetControlID="lkbSubstitutoDe" PopupControlID="panelSubstitutoDe" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
            <asp:Panel ID="panelSubstitutoDe" runat="server" Style="display: none" CssClass="modalPopup" Width="650px">
                <asp:LinkButton ID="lkbSubstitutoDe" TabIndex="999" runat="server"></asp:LinkButton>
                <div style="border: 3px solid #1D5283">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td id="tdTitulo" runat="server" style="background-image: url('../../Imagens/titlebg_dark.gif'); height: 25px; color: White">
                                <table id="tbTitulo" runat="server">
                                    <tr>
                                        <td style="width: 640px; color: White" align="left"><b>Erros Encontrados</b></td>
                                        <td style="cursor: default">
                                            <asp:ImageButton ID="btnFecharSubstitutoDe" runat="server" BorderStyle="None" ImageUrl="~/Imagens/fechar0.png" ToolTip="Fechar"></asp:ImageButton>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td id="tdToolbar" runat="server" style="height: 40px; background-image: url('../../Imagens/titlebg.gif')">
                                <asp:ImageButton ID="btnVoltarSubstitutoDe" ImageUrl="~/Imagens/seta_esq2_b.gif" Width="23px" runat="server" ToolTip="Voltar" />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:10px 10px 10px 10px">
                                <br />
                                <span style="color:Red; text-decoration:underline; font-weight:bold">Prestador substituto de:</span>
                                <br />
                                <br />
                                <div id="dvBusca" runat="server" style="overflow-x:hidden; overflow-y:auto; height:200px">
                                    <asp:GridView ID="gridSubstitutoDe" runat="server" AutoGenerateColumns="False" Width="100%" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" CellPadding="3">
                                        <Columns>
                                            <asp:BoundField ItemStyle-Width="12%" DataField="cod_prestador" HeaderText="Código" HeaderStyle-CssClass="gridHeaderStyle" />
                                            <asp:BoundField ItemStyle-Width="38%" DataField="nome_prestador" HeaderText="Nome" HeaderStyle-CssClass="gridHeaderStyle" />
                                            <asp:BoundField ItemStyle-Width="32%" DataField="rede" HeaderText="Rede" HeaderStyle-CssClass="gridHeaderStyle" />
                                            <asp:BoundField ItemStyle-Width="18%" DataField="dt_fim_exibe_direcionamento" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="gridHeaderStyle" HeaderText="Disponível para visualização até" />
                                        </Columns>
                                        <FooterStyle CssClass="gridFooterStyle" />
                                        <HeaderStyle CssClass="gridHeaderStyle" />
                                        <RowStyle CssClass="gridRowStyle" />
                                        <AlternatingRowStyle CssClass="gridAlternatingRowStyle" />
                                    </asp:GridView>
                                    <br />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </asp:Panel>
            <asp:ModalPopupExtender ID="mpeDetalhesExclusao" runat="server" TargetControlID="linkDetalhesExclusao" PopupControlID="panelDetalhesExclusao" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
            <asp:Panel ID="panelDetalhesExclusao" runat="server" Style="display: none" CssClass="modalPopup" Width="520px">
                <asp:LinkButton ID="linkDetalhesExclusao" TabIndex="999" runat="server"></asp:LinkButton>
                <div style="border: 3px solid #1D5283">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td id="tdExclusaoTitulo" runat="server" style="background-image: url('../../Imagens/titlebg_dark.gif'); height: 25px; color: White">
                                <table id="Table1" runat="server">
                                    <tr>
                                        <td style="width: 640px; color: White" align="left"><b>Detalhe das informações do registro exclusão</b></td>
                                        <td style="cursor: default">
                                            <asp:ImageButton ID="btExclusaoFechar" runat="server" BorderStyle="None" ImageUrl="~/Imagens/fechar0.png" ToolTip="Fechar"></asp:ImageButton>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:15px 15px 20px 5px">
                                <table>
                                    <tr>
                                        <td align="right">Operadora:</td>
                                        <td style="padding-left:0px"><uc2:listaOperadora ID="listaOperadoraExclusao" runat="server" Width="233px" ExibirDescricao="false" AutoPostBack="true" Visible="true"/></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Motivo:</td>
                                        <td><asp:TextBox ID="txtExclusaoMotivo" Width="230px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Data Notificação da Exclusão Voluntária:</td>
                                        <td><asp:TextBox ID="txtExclusaoDataNotificacaoVoluntaria" Width="90px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Data Exclusão:</td>
                                        <td><asp:TextBox ID="txtExclusaoDataExclusao" Width="90px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox>
                                            <%--<asp:Label ID="lblPrazoSubsAns" runat="server"></asp:Label>--%>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td align="right">Data Limite Realização:</td>
                                        <td><asp:TextBox ID="txtExclusaoDataLimiteRealizacao" Width="90px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Data Limite Apresentação:</td>
                                        <td><asp:TextBox ID="txtExclusaoDataLimiteApresentacao" Width="90px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Data Limite Reapresentação:</td>
                                        <td><asp:TextBox ID="txtExclusaoDataLimiteReapresentacao" Width="90px" runat="server" ReadOnly="true" Enabled="false"></asp:TextBox></td>
                                    </tr>
                                    <tr>
                                        <td align="right" valign="top">Observações:</td>
                                        <td><asp:TextBox ID="txtExclusaoObservacoes" Width="230px" Height="50px" runat="server" ReadOnly="true" Enabled="false" TextMode="MultiLine"></asp:TextBox></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript">
        function montaDataSubstituicaoPrestador(dt_exclusao) {

            var prazoSubPrestador = 60;

            var arrData = dt_exclusao.split('/');

            var exclusaoFormatada = arrData[1] + '-' + arrData[0] + '-' + arrData[2];
            var dias = parseInt(prazoSubPrestador);
            var novaData = new Date(arrData[2], arrData[1] - 1, arrData[0]);

            novaData.setDate(novaData.getDate() + dias);

            hoje = new Date(novaData)
            dia = hoje.getDate()
            mes = hoje.getMonth()
            ano = hoje.getFullYear()
            if (dia < 10)
                dia = "0" + dia

            if ((mes + 1) < 10)
                mes = "0" + (mes + 1);

            if (ano < 2000)
                ano = "19" + ano

            var dt = dia + "/" + (mes) + "/" + ano;

            document.getElementById('lblPrazoSubsAns').innerHTML = "Prazo de substituição: " + dt;
        }
    </script>

</asp:Content>

Pegando a sugestão do colega RBoschini, coloquei uma borda e veja como está. Tentei alinhar à esquerda, mas não consegui. veja imagem abaixo. inserir a descrição da imagem aqui

6
  • Isso é CSS creio eu, tente aumentar a largura da sua TD/Table e colocar o label float:left. também verifique se o HEIGHT/Width do LABEL não está maior do que cabe na TR. Se não conseguir... Coloca o LABEL em outra TD 8/12/2015 às 17:33
  • Qual tipo de elemento HTML é o <cc1 /> ? Acho que o <cc1:Calendario /> é display: block; e está quebrando a linha no <label>. 8/12/2015 às 18:17
  • @devgaspa, cc1 é um calendário. Só que não consigo estilizar ele. Ele não aceita o elemento style, apenas o borderstyle.
    – pnet
    9/12/2015 às 9:50
  • Creio que o elemento cc1 esteja quebrando qualquer coisa e mantendo na linha de baixo da <td> e uma outra <td> ele está colocando no extremo direito, é o que parece.
    – pnet
    9/12/2015 às 10:21
  • 1
    Tente usar as ferramentas de desenvolvedor para inspecionar o elemento e verificar o width. 9/12/2015 às 10:29

3 Respostas 3

1

Tenta colocar os elementos que você quer em linha dentro de uma ul e depois da display:inline nas li dentro.

<tr>
    <td style="text-align:right">Data Exclusão:</td>
    <td align="left"> 
        <ul style="float: left;">
            <li style="display:inline-table;"><cc1:Calendario id="calDataExclusao" runat="server" AutoPostBack="true" OnTextChanged="calDataExclusao_TextChanged" /></li>
            <li style="display:inline-table;"><label for="calDataExclusao" id="lblPrazoSubsAns" style="color: red"></label></li>
        </ul>
        <asp:HiddenField ID="hidQtdeDiasExclusao" runat="server" />
        <asp:HiddenField ID="hidIndLEI13003" runat="server" />
    </td>
  </tr>

Tenta assim, esse é o caminho. Se vocÊ usa bootstrap, tenta colocar a classe list-inline no seu ul.

16
  • Fiz uma edição para mostrar como ficou. Eu tenho uma certa dificuldade.
    – pnet
    9/12/2015 às 12:10
  • Fiz outra alteração, da uma olhada se ajuda.
    – RBoschini
    9/12/2015 às 12:24
  • Continua quebrando, da mesma forma anterior.
    – pnet
    9/12/2015 às 12:54
  • você está usando bootstrap? coloca o style="float: left;" no TD e veja se vai.
    – RBoschini
    9/12/2015 às 12:57
  • Não, não estou usando bootstrap.
    – pnet
    9/12/2015 às 13:40
1

Tente colocar o parâmetro Style dentro da tag do calendário com valor de float:left!important. Vai levar a label para a direita do calendário. Isso deve resolver.

1

Coloque no style um float na tag label:

    <label for="calDataExclusao" id="lblPrazoSubsAns" style="color:red;float:right;display:inline"></label>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .