CODEWITHSUNDEEP
asp.netwebformsdrop-down-menualignmentlistitem
Răzvan Flavius Panda
Răzvan Flavius Panda

Reputation: 22116

How can I set alignment for a ListItem in a DropDownList?

I have a DropDownList in my aspx file like this:

<asp:DropDownList runat="server" ID="MaxRec">
  <asp:ListItem>10</asp:ListItem>
  <asp:ListItem>50</asp:ListItem>
  <asp:ListItem>100</asp:ListItem>
  <asp:ListItem>150</asp:ListItem>
  <asp:ListItem Selected="True">200</asp:ListItem>
</asp:DropDownList>

In Chrome it renders like this:

DDL

How can i set the alignment on all ListItems to be to the right so that values are properly aligned? I tried setting style="text-align:right" on the DropDownList and on the ListItems but it doesn't have any effect. I need a solution that also works on Chrome.

Thanks for replies!

Upvotes: 3

Views: 8815

Answers (2)

jdavies
jdavies

Reputation: 12894

Adding the following style will align the numbers as required but will move the drop down arrow to the left instead of the right.

Other than using this I assume the inability to right align select options may be a limitation in Chrome.

.drop-down-list
{
    direction: rtl;
}

Upvotes: 3

Shebin
Shebin

Reputation: 3468

the below code works for me 

<head>
    <style type="text/css">
          select.myDropDownList {
            text-align: right;
          }
        </style>
 </head>  


 <asp:DropDownList ID="myDropDownList" Runat="server" CssClass="myDropDownList">
   <asp:ListItem>10</asp:ListItem>
    <asp:ListItem>50</asp:ListItem>
    <asp:ListItem>100</asp:ListItem>
     <asp:ListItem>150</asp:ListItem>
 </asp:DropDownlist>

Upvotes: 3

Related Questions