CODEWITHSUNDEEP
c#asp.netcsslayout
Paula Shenouda
Paula Shenouda

Reputation: 223

Put multiple textboxes and labels under each other on the same column css?

enter image description here

Hello! Is it possible to put multiple textboxes and labels under each other on the same column as shown in the picture by CSS coding? and how?

when i do it, it appears like this : enter image description here Thanks

Upvotes: 2

Views: 7105

Answers (4)

unarity
unarity

Reputation: 2445

<table width="100%">
    <tr>
        <td id="tdControlLabel" runat="server" align="right">        
              <asp:Label ID="_controlLabel" runat="server"></asp:Label>              
        </td>
        <td style=" color:Red;">
            <asp:Label ID="_isMandatory" runat="server" Text="*" Width="2" />
        </td>
        <td align="left">
            <asp:TextBox ID="_value" runat="server"></asp:TextBox>
        </td>
    </tr>
    </table>

I put this in user control and I use it where ever I want

Here is code behind

public bool isPassword
        {
            set
            {
                if (value) _value.TextMode = TextBoxMode.Password;
            }
        }
        public string ForeignKey
        {
            get { return hdnForeignKey.Value; }
            set { hdnForeignKey.Value = value; }
        }

        public string ControlLabel
        {
            get { return _controlLabel.Text; }
            set { _controlLabel.Text = value; }
        }

        public bool IsMandatory
        {
            get { return _isMandatory.Visible; }
            set { _isMandatory.Visible = value; }
        }

        public string Value
        {
            get { return _value.Text; }
            set { _value.Text = value; }
        }

        public bool IsReadyForInput
        {
            get { return _value.Enabled; }
            set { _value.Enabled = value; }
        }

        public string ControlLabelWidth
        {
            set { tdControlLabel.Width = value; }
        }

        public bool isTextArea
        {
            set
            {
                if(value)
                {
                    _value.TextMode = TextBoxMode.MultiLine;
                    _value.Rows = 5;
                }
                else
                {
                    _value.TextMode = TextBoxMode.SingleLine;
                }
            }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            _value.BackColor = System.Drawing.Color.White;
        }

And this is implementation

<uc1:ucTextBox ID="txtxName" ControlLabel="Name" ControlLabelWidth="145"
                                    runat="server" IsMandatory="true"></uc1:ucTextBox>

Upvotes: 1

giftcv
giftcv

Reputation: 1662

Try this

In your aspx page

<form id="form1" runat="server">
<div class="row"> 
    <asp:Label ID="Label1" runat="server" Text="Label" CssClass="label">Dropdown:</asp:Label>
    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="input"></asp:DropDownList>
</div>
<div class="row">
    <asp:Label ID="Label2" runat="server" Text="Label" CssClass="label">Textbox 1:</asp:Label>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="input"></asp:TextBox>
</div>
<div class="row">
    <asp:Label ID="Label3" runat="server" Text="Label" CssClass="label">Textbox 2:</asp:Label>
    <asp:TextBox ID="TextBox2" runat="server" CssClass="input"></asp:TextBox>
</div>
</form>

and in your css file

.row{ display:block; height:30px;}
.label{ float:left; width:100px;}
.input{ float:left; width:100px;}

Upvotes: 2

James Hill
James Hill

Reputation: 61832

There are a ridiculous number of ways to do this. From simple fieldset's to CSS to table's (as everyone cringes). It all comes down to how you want to design the site/form. Take a look at these two examples:

Simple: http://jsfiddle.net/JamesHill/RqdMY/

Complex: http://jsfiddle.net/JamesHill/nhmjD/

Upvotes: 1

Glory Raj
Glory Raj

Reputation: 17701

i am hoping this will helps you..

use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.

or

take a look at here http://jsfiddle.net/Qs4pk/2/

Upvotes: 2

Related Questions