How to leave the position of a fixed div according to the Raddiobutton change

Asked

Viewed 169 times

1

I have the following screen that once changes the option of RaddioButton to div goes down or up. I wonder how to leave fixed in a position.

Selected the Cycle option:

inserir a descrição da imagem aqui

Selecting the Year option:

inserir a descrição da imagem aqui

aspx:

<div id="indicadores" style="display: none; margin-left: 447px; margin-top: -50px; height: 39px;" class="divFiltros">
    <asp:Label ID="Label40" runat="server" Width="85px" Style="margin-top: 15px;">TIPO RELATÓRIO</asp:Label>
    <div style="border: solid 2px; height: 28px; width: 314px; margin-left: 115px; margin-top: -27px;">
        <asp:RadioButtonList ID="rdbIndicadores" name="rdbIndicadores" CssClass="radioItens" runat="server" RepeatDirection="Horizontal" Style="width: 319px;">
            <asp:ListItem Text="CICLO" Value="ciclo" Selected="True"></asp:ListItem>
            <asp:ListItem Text="ANO" Value="ano"></asp:ListItem>
        </asp:RadioButtonList>
    </div>
    <br />
</div>

css:

<style type="text/css">
.radioItens label {
    margin-left: -105px;
    display: block;
    text-align: right;
    width: 145px;
    margin-top: 3px;
}
  • @Damondudek No, it changes position as it is selected, as in the images.

  • Your CSS is all wrong, the problem is a little bigger! and you have passed little information to fix...

  • @Virgilionovic what else would be needed to evaluate but in detail?

  • The entire set of information, css, javascript and html of the page

  • Do you want to keep them centralized? If so: display: flex; align-items: center; Justify-content: center;

  • No, I want to leave the div containing the 2 Raddiobuttons fixed in one position.

Show 1 more comment

1 answer

1


Try to change the position and remove the label, because I did not identify any label element inside your radioItens

.radioItens{
    position: relative;
    margin-left: -105px;
    display: block;
    text-align: right;
    width: 145px;
    margin-top: 3px;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.