Remove From My Forums

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

Question
0

Sign in to vote

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

0

Sign in to vote

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

Answered by:

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

Question

Answers

All replies