locked
Set textbox width in a Repeater RRS feed

  • Question

  • User-90830185 posted

    I have a simple Web Form with a textbox control. Depending on some condition (True/False) I need to change the width of the textbox. 

    I tried doing this with the server side code by simply looping through each of textbox (i.e. For Each item In rptRepeater) and then depending on the condition I set the width of the textbox e.g. If True then txtName.width = x else txtName.width = y. This works the first time but on after every postback the width of the textbox changes to the default.

    I tried doing the same using a javascript (in pageLoad) but it it does not work because the textbox is in Repeater. Therefore, I don't know how to loop round in javascript for each of the occurrence of textbox in the repeater and change it's width and not sure if this will work? I wonder if someone can assist with this approach (i.e. of doing via javascript) or indeed suggest another way please?

    Thursday, December 26, 2019 6:26 PM

Answers

  • User1535942433 posted

    Hi Moodhi,

    Accroding to your description,  I couldn’t understand your requirement clearly.

    I suggest you could post the details codes about your aspx page and code-behind codes.

    Besides, if you want to modify the textbox width by js,  I suggest you could get  TagName of input.Then loop these input and check it wheater its' type are text.If it's type is text,you could continue to check and change the width of textbox. 

    More details,you could refer to below codes:

    ASPX:

    <script>
    
            function valication() {
    
                var txt = document.getElementsByTagName('input');
    
                for (var i = 0; i < txt.length; i++)
    
                {
    
                    if (txt[i].type == "text") {
    
                        if (txt[i].value.length > 3) {
    
                            txt[i].style.width = '100px';
    
                        }
    
                        else
    
                             txt[i].style.width = '50px';
    
                    }
    
                }
    
            }
    
        </script>
    
     
    
     
    
     
    
    <form id="form1" runat="server" onclick="return valication();">
    
                <asp:Repeater ID="Repeater1" runat="server">
    
                    <ItemTemplate>
    
                        <table class="">
    
                        <tr>
    
                            <td>
    
                                 First:
    
                            </td>
    
                            <td>
    
                                <asp:TextBox ID="TbName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "First") %>'></asp:TextBox>
    
                            </td>
    
                        </tr>
    
                       <tr>
    
                            <td>
    
                                 Second:
    
                            </td>
    
                           <td>
    
                               <asp:TextBox ID="TbAge" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Second") %>'></asp:TextBox>
    
                           </td>
    
                        </tr>
    
                        <tr>
    
                            <td>
    
                               Third:
    
                            </td>
    
                            <td>
    
                                <asp:TextBox ID="TbPhone" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Third") %>'></asp:TextBox>
    
                            </td>
    
                        </tr>
    
                       </table>                    
    
                    </ItemTemplate>
    
                </asp:Repeater>
    
        </form>

    Code-Behind:

    protected void Page_Load(object sender, EventArgs e)
    
            {
    
                DataTable dt = new DataTable();
    
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("First"), new DataColumn("Second"), new DataColumn("Third") });
    
                dt.Rows.Add(1, 10, 18589632698);
    
                dt.Rows.Add(21255966996,2,103);
    
                Repeater1.DataSource = dt;
    
                Repeater1.DataBind();
    
            }
    
     

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 27, 2019 9:45 AM