locked
How do i round the edges of Textbox control in asp.net RRS feed

  • Question

  • User-2074858223 posted

    I want to round the edges of TextBox control

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    Wednesday, January 24, 2018 5:37 PM

Answers

  • User2103319870 posted

    If you are ok with using Boostrap, then a much better option is to use the css style from bootstrap

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
            <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" Style="width: 150px"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 24, 2018 5:42 PM
  • User-1838255255 posted

    Hi micah2012,

    According to your description, please check the following sample code: 

    Sample Code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
    
            .table {
                border: 1px solid #ccc;
                border-collapse: collapse;
                width: 200px;
            }
    
                .table th {
                    background-color: #F7F7F7;
                    color: #333;
                    font-weight: bold;
                }
    
                .table th, .table td {
                    padding: 5px;
                    border: 1px solid #ccc;
                }
    
            input[type=text] {
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DataList ID="dlCustomers" runat="server" RepeatColumns="3"
                CellSpacing="3" RepeatLayout="Table">
                <ItemTemplate>
                    <table class="table">
                        <tr>
                            <th colspan="2">
                                <b>
                                    <%# Eval("ContactName") %></b>
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <%# Eval("City") %>,
                            <%# Eval("PostalCode") %><br />
                                <%# Eval("Country")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone:
                            </td>
                            <td>
                                <%# Eval("Phone")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Fax:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Fax")%>'></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </form>
    </body>
    
    DataTable dt = new DataTable();
            dt.Columns.Add("ContactName", typeof(string));
            dt.Columns.Add("City", typeof(string));
            dt.Columns.Add("PostalCode", typeof(string));
            dt.Columns.Add("Country", typeof(string));
            dt.Columns.Add("Phone", typeof(string));
            dt.Columns.Add("Fax", typeof(string));
    
            dt.Rows.Add("111","222","333","444","555");
            dlCustomers.DataSource = dt;
            dlCustomers.DataBind();

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 25, 2018 11:43 AM
  • User2103319870 posted

    It didn't work because the textbox is inside nested Datalist

    I tried with below code and its works as expected

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
            .txtbox {
                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                width: 150px;
            }
        </style>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DataList ID="dlCustomers" runat="server" RepeatColumns="3"
                CellSpacing="3" RepeatLayout="Table">
                <ItemTemplate>
                    <table class="table">
                        <tr>
                            <th colspan="2">
                                <b>
                                    <%# Eval("ContactName") %></b>
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <%# Eval("City") %>,
                            <%# Eval("PostalCode") %><br />
                                <%# Eval("Country")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone:
                            </td>
                            <td>
                                <%# Eval("Phone")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Fax:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Fax")%>' CssClass="txtbox form-control"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>

    Make sure you have proper reference of bootstrap css file in your page

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 25, 2018 2:00 PM

All replies

  • User2103319870 posted

    You can try with below code

     <style type="text/css">
                .txtbox {
                    -webkit-border-radius: 50px;
                    -moz-border-radius: 50px;
                    border-radius: 50px;
                    width: 150px;
                }
            </style>
    
            <asp:TextBox ID="TextBox1" runat="server" CssClass="txtbox"></asp:TextBox>

    Wednesday, January 24, 2018 5:41 PM
  • User2103319870 posted

    If you are ok with using Boostrap, then a much better option is to use the css style from bootstrap

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
            <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" Style="width: 150px"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 24, 2018 5:42 PM
  • User-1838255255 posted

    Hi micah2012,

    According to your needs, i agree with a2h's solution, use border-radius property to set the corner of the textbox, but i want to add some documents to make the solution more rich. 

    Rounded Corners: 

    https://css-tricks.com/snippets/css/rounded-corners/  

    CSS Rounded Corners: 

    https://www.w3schools.com/css/css3_borders.asp 

    Best Regards,

    Eric Du 

    Thursday, January 25, 2018 6:33 AM
  • User-2074858223 posted

    It didn't work because the textbox is inside nested Datalist

    <asp:DataList ID="GetUSERPOST" runat="server" OnItemDataBound="GetUSERCOMMENTS2_ItemDataBound" Width="100%">
                            <ItemTemplate>
    <asp:DataList ID="GetUSERCOMMENTS2" runat="server" OnItemDataBound="GetUSERCOMMENTS2_ItemDataBound" Width="100%">
                            <ItemTemplate>
      <asp:TextBox ID="txtcommentpost" runat="server" rows="1" cols="20" CssClass="txtbox form-control" placeholder="Reply..."  OnTextChanged="OnTextChanged" MaxLength="500"  TextMode="MultiLine">
    </asp:TextBox>
    
    
    
    
     </ItemTemplate>
                     <FooterTemplate >
                       
                             
    
                      
                         
                     </FooterTemplate>
                        </asp:DataList>
    
    
     </ItemTemplate>
                    
                        </asp:DataList>

    Thursday, January 25, 2018 7:21 AM
  • User-1838255255 posted

    Hi micah2012,

    According to your description, please check the following sample code: 

    Sample Code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
    
            .table {
                border: 1px solid #ccc;
                border-collapse: collapse;
                width: 200px;
            }
    
                .table th {
                    background-color: #F7F7F7;
                    color: #333;
                    font-weight: bold;
                }
    
                .table th, .table td {
                    padding: 5px;
                    border: 1px solid #ccc;
                }
    
            input[type=text] {
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DataList ID="dlCustomers" runat="server" RepeatColumns="3"
                CellSpacing="3" RepeatLayout="Table">
                <ItemTemplate>
                    <table class="table">
                        <tr>
                            <th colspan="2">
                                <b>
                                    <%# Eval("ContactName") %></b>
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <%# Eval("City") %>,
                            <%# Eval("PostalCode") %><br />
                                <%# Eval("Country")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone:
                            </td>
                            <td>
                                <%# Eval("Phone")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Fax:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Fax")%>'></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </form>
    </body>
    
    DataTable dt = new DataTable();
            dt.Columns.Add("ContactName", typeof(string));
            dt.Columns.Add("City", typeof(string));
            dt.Columns.Add("PostalCode", typeof(string));
            dt.Columns.Add("Country", typeof(string));
            dt.Columns.Add("Phone", typeof(string));
            dt.Columns.Add("Fax", typeof(string));
    
            dt.Rows.Add("111","222","333","444","555");
            dlCustomers.DataSource = dt;
            dlCustomers.DataBind();

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 25, 2018 11:43 AM
  • User2103319870 posted

    It didn't work because the textbox is inside nested Datalist

    I tried with below code and its works as expected

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
            .txtbox {
                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                width: 150px;
            }
        </style>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DataList ID="dlCustomers" runat="server" RepeatColumns="3"
                CellSpacing="3" RepeatLayout="Table">
                <ItemTemplate>
                    <table class="table">
                        <tr>
                            <th colspan="2">
                                <b>
                                    <%# Eval("ContactName") %></b>
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <%# Eval("City") %>,
                            <%# Eval("PostalCode") %><br />
                                <%# Eval("Country")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone:
                            </td>
                            <td>
                                <%# Eval("Phone")%>
                            </td>
                        </tr>
                        <tr>
                            <td>Fax:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Fax")%>' CssClass="txtbox form-control"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>

    Make sure you have proper reference of bootstrap css file in your page

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 25, 2018 2:00 PM