CODEWITHSUNDEEP
.nethtmlcss
Andreas
Andreas

Reputation: 1479

Alignment in radiobuttonlist, text and pictures are offset

Image of the offset problem

So this is what I get when I try to make a radiobuttonlist in vertical mode without any settings, could someone help me get everything aligned? Feels like i tried everything...

<asp:RadioButtonList ID="selectionbuttonlist" 
                     runat="server" 
                     RepeatDirection="Horizontal"
                     OnDataBound="selectionbuttonlist_DataBound" 
                     AutoPostBack="true" 
                     RepeatLayout="Flow">
    <asp:ListItem Value="All" Selected="True">
        Allt
    </asp:ListItem>
    <asp:ListItem Value="A">
        <img src="../Images/PlanCategoryGeneral.gif" align="absmiddle" />
        Allmänt
    </asp:ListItem>
</RadioButtonList>

Upvotes: 1

Views: 6993

Answers (2)

Andreas
Andreas

Reputation: 1479

The code which i used to fix the alignment:

  input[type=radio] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
    input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

Upvotes: 2

Kjartan
Kjartan

Reputation: 19091

Update (misunderstood the question at first, see comment below):

Have you seen this SO-question? It is not exactly the same situation, but pretty close. You should be able to do this by giving your elements a CSS class, then styling that to remove any margins and align it to for instance middle or bottom (like vertical-align:middle).

If this does not work, you might want to try vertically aligning to center, then adding some margin-distance to the top until the elements are positioned where you want them.

Note: You might have to use the type <asp:RadioButton CssClass="YourClass" /> to do this though; I'm not quite sure if it will work directly on an <li> element.

My previous answer:

I haven't tested this, but the following seems logical, and seems to be supported by the MSDN documentation (changed "horizontal" to "vertical"):

<asp:RadioButtonList ID="selectionbuttonlist" 
                 runat="server" 
                 RepeatDirection="Vertical"
                 OnDataBound="selectionbuttonlist_DataBound" 
                 AutoPostBack="true" 
                 RepeatLayout="Flow">

    (...)
</RadioButtonList>

Upvotes: 1

Related Questions