CODEWITHSUNDEEP
c#htmlasp.netcsstextbox
Bryan
Bryan

Reputation: 8697

how do i change the width of my textbox in css?

i added a asp.net textbox into my webpage and cover it with css like shown below

<tr>           
   <td id="policeprofileachievement" colspan="2" align="center">
            <b>Achievement :
            <asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine"></asp:TextBox>
            <br />
   </td>
</tr>

In my source code i have added a width for the textbox. But in my css, i added this but it didnt resize my textbox width

#policeprofileachievement [type="text"] {

    position:absolute;
    margin-top:250%;
    left:0%;
    width:150px;
}

AND/OR

I removed the policeprofileachievement from my CSS and added this ( which is recommended by many )

#txtAchievement{
 position:absolute;
 margin-top:250%;
 left:0%;
 width:150px;

}

But there doesn't seem to have any changes on my textbox size either

Is there any other way to resize my textbox size?

Regards

Upvotes: 0

Views: 8339

Answers (7)

Bhupendra Shukla
Bhupendra Shukla

Reputation: 3914

.txtbox
{
    position:absolute;
    margin-top:250%;
    left:0%;
    width:150px;
}

Upvotes: 2

sangram parmar
sangram parmar

Reputation: 8726

Try this:

put space between #policeprofileachievement and [type="text"]

means style for inner all [type="text"] in #policeprofileachievement 

#policeprofileachievement [type="text"] {

    position:absolute;
    top:250%;
    left:0%;
    width:150px;
}

Upvotes: 0

Sasidharan
Sasidharan

Reputation: 3740

Try this.It should work..For me its working..

.aspx

 <asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine">  </asp:TextBox>

CSS

<style>
    #txtAchievement
    {
        width:50px;
    }
</style>

Upvotes: -1

Nisha
Nisha

Reputation: 1439

CSS means cascading style sheet. So your css code block renders second but the text box that you have written already has a width component which will be 'cascaded' by the css you have written. Remove the css width property and your code should work.

With your present code try giving width below 150px. That may work.

Upvotes: 0

Arawn
Arawn

Reputation: 27

Why dont you simply create a css class and add it to your textbox's cssclass property, like so..

.tb_style
{
    position:absolute;
    margin-top:250%;
    left:0%;
    width:150px;
}

THEN ADD IT TO YOUR TEXTBOX LIKE SO

<asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine" Height="150px" Width="500px" CssClass="tb_style"></asp:TextBox>

This will also allow you to add same style to other TextBox(s) and create a constant look and feel to the webpage with minimal effort

Make sure you dont write some rule inline to your textbox thats also there in the cssclass...cuz your inline rule will override the rule in class.

Upvotes: 1

neel
neel

Reputation: 5293

  #txtAchievement{
 position:absolute;
margin-top:250%;
left:0%;
width:150px;
 }

Upvotes: 1

nneonneo
nneonneo

Reputation: 179402

The CSS selector #policeprofileachievement[type="text"] means "a tag with ID policeprofileachievement and type=text", which selects nothing because the td with id=policeprofileachievement has no type attribute.

You can use #txtAchievement to select the textbox because it has an id (no need to specify [type="text"]).

Alternatively, if for some reason you need to select multiple text input fields under policeprofileachievement, you could do

#policeprofileachievement input[type="text"]

Upvotes: 0

Related Questions