NumericUpDownExtender buttons same height as the textbox

Question

I'm using the NumericUpDownExtender control, but my buttons on the side of the textbox are bigger then my textbox, is there a way to make the buttons the same height as my textbox?

Edit: I found my problem. I was using the standard buttons, which can't be handled?. Now I've created custom ones, but they won't appear on each other, but next to each other.

my code:

<asp:TextBox ID="txtHerst" runat="server" Text="0" Style="text-align: center"></asp:TextBox><cc1:NumericUpDownExtender ID="extHerst" runat="server" TargetControlID="txtHerst"
Width="50" Enabled="True" Maximum="1.7976931348623157E+308" Minimum="-1.7976931348623157E+308"
RefValues="" ServiceDownMethod="" ServiceDownPath="" ServiceUpMethod="" Tag=""
TargetButtonDownID="imgBtnDown" TargetButtonUpID="imgBtnUp"></cc1:NumericUpDownExtender><asp:ImageButton ID="imgBtnUp" runat="server" ImageUrl="Images/up.jpg" /><asp:ImageButton ID="imgBtnDown" runat="server" ImageUrl="Images/down.jpg" />`

Answer 1

first all of you should create some Css.

    <style type="text/css">
        .auto-style1 {
            width: 78px;
        }
        .auto-style2 {
            height: 5px;
            width: 19%;
        } 
    </style>

So, in my case I've created a table and set the columns with the controllers and buttons that need it, works for me

                                     <table  border="1">
                                        <tr >
                                           <td class="auto-style1" ><asp:TextBox ID="TextBox1" runat="server"  Width="100%" Text='<%# Bind("Secuencia") %>' Height="18px"></asp:TextBox></tdstyle="width=70%> </td>
                                             <td class="auto-style2" >
                                                    <asp:ImageButton ID="up" runat="server"  style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/up.gif" Width="10px" />
                                                    <asp:ImageButton ID="down" runat="server" style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/down.gif" Width="10px" />
                                              </td>

                                        </tr>
                                    </table>
                                    <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" Width="20" runat="server"  
                                      TargetButtonUpID="up" TargetButtonDownID="down"    TargetControlID="TextBox1" />                                            

Answer 2

You should be able to use css to do that...

Answer 3

I encountered the same problem, and eventually replaced the extender to RangeValidator.