Solved

Revert CSS width:100% to default?

Posted on 2011-03-02
12
600 Views
Last Modified: 2012-05-11
Hi Experts,

I have a .css file which contains something like this:

    input
    { width: 100% }


That works fine in my HTML, except occasionally, I want one of my many <input> tags to have the default width behaviour (whatever that is).  I know I can do things like:

   <input style="width: 50%" ...>

but I want to know how to get the width to be what it would have been if there was no .css file (i.e. the default width).

Without using a different .css file, how can I revert to the default width for some instances of my <input> tags?

Thanks.
0
Comment
Question by:tel2
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024228
in the same html file you can put

<style>
  input.textBoxes
  {
     width:50%;
  }
</style>

 <input class="textBoxes">
0
 
LVL 11

Author Comment

by:tel2
ID: 35024257
Thanks for your prompt response, gurvinder372.

I'm aware of that, but
> I want to know how to get the width to be what it would have been if there was no .css file (i.e. the default width).

I don't know what % to use to get the default width, but I want the default width.

Are you with me?
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 80 total points
ID: 35024271
when you say default width, what exactly do you mean?
normally the width of textbox is decided by the 'size' attribute.

You can use innerWidth to get the current width,
http://api.jquery.com/innerWidth/



0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024272
you can get the same using plain javascript also
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
0
 
LVL 11

Author Comment

by:tel2
ID: 35024298
Hi gurvinder372,

Sorry, I forgot to mention I am not using jQuery or JavaScript - just straight HTML & CSS.

Now to your question:
> when you say default width, what exactly do you mean?
the answer is:
>> what it would have been if there was no .css file
...and not width specified anywhere.

Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024310
If you want to specify a width, so that it uses the default width, then it is as good as not specifying a width. Then, don't specify the width.

Let me know if it is mandatory/necessary to specify the width
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 12

Accepted Solution

by:
Amick earned 300 total points
ID: 35024422
If you want the width, margins, padding, etc. that you would have had if you hadn't specified a style, you can use inherit.

This example shows that the second div inherits the body style.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Inherit Example</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div {width:50%;
	 margin:10% 25%;
	 color:blue;}
</style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 
Praesent mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tellus sed augue semper 
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per 
conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. 


</div>
<div style="margin:inherit;width:inherit; color:inherit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 
Praesent mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tellus sed augue semper 
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per 
conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. 


</div>
</body>
</html>

Open in new window

0
 
LVL 11

Author Comment

by:tel2
ID: 35024506
Hi gurvinder372,

> I want one of my many <input> tags to have the default width behaviour (whatever that is).
> how can I revert to the default width for some instances of my <input> tags?

I have several pages which use the same .css file, but for the occasional instance of an <input> tag, I want the tag to act as if no with was specified.

Sorry - forgot to respond to the following, earlier:
> normally the width of textbox is decided by the 'size' attribute
I think 'size' is controls limits the number of characters the textbox can contain.  I'm wanting to size the box itself...only.


Hi Amick,

Well presented.  I think that might be what I want.  I'll have to do some experimenting sometime and get back to you.  Thanks.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35024665
After reading the W3C HTML 3.2 and 4.0 standards, it appears that there isn't an officially defined 'size' for <input>s.  Most browsers use 'size=20' as the default but that is in the current font also.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024714
<<I have several pages which use the same .css file, but for the occasional instance of an <input> tag, I want the tag to act as if no with was specified.>>

Please make sure that in your css should be applying the width to a class, and not all inputs in general. Then, all you need to do is make sure that your <<occasional instance>> input tag doesn't have that class.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 120 total points
ID: 35024748
This little demo shows that you need to use CSS to control the size of the 'box'.  In this case, CSS overrides the 'size' attribute.  Works the same in all browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Size test</title>
<style type="text/css">
<!-- 
.inp1 {width: 10%} 
-->
</style>
</head>
<body>
<h1>Size test</h1>
<form action="#" method="post">
<input type="text" class="inp1" name="num1" size="10" value="num1" /><br />
<input type="text" class="inp1" name="num2" size="20" value="num2" /><br />
<input type="text" class="inp2" name="num3" size="10" value="num3" /><br />
<input type="text" class="inp2" name="num4" size="20" value="num4" /><br />
<input type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

0
 
LVL 11

Author Closing Comment

by:tel2
ID: 35031396
[b]Hi gurvinder372[/b],

> [i]Please make sure that in your css should be applying the width to a class, and not all inputs in general.[/i]
I was aware of that option, but I was hoping to avoid doing that, in order to keep my pages as small as poss (dial-up thinking, perhaps).  I'd rather have:
* 99 input tags with no mention of width/size/class (to keep the bytes down), just picking up the general rule for <input> from the .css file.
and
* 1 input tag doing 'inherit', or whatever is needed to revert the effect of the .css style.

> [i]normally the width of textbox is decided by the 'size' attribute[/i]
>> [u]I think 'size' is controls limits the number of characters the textbox can contain.  I'm wanting to size the box itself...only.[/u]
Sorry - I've just realised, from Dave's post, that I was thinking of the 'maxlength' attribute.  You were right about that.

Forgive me for quoting myself so much in my previous posts, but I did so to show that this info was already in my original post, and it would save both of us time if a bit more time was spent in reading initially.  Next time, perhaps.  Thanks for your time, though.


[b]Hi Dave[/b],

Well said.  Input appreciated.


Thanks to all of you.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now