Solved

Revert CSS width:100% to default?

Posted on 2011-03-02
12
615 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 12

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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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 12

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
 
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 12

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 83

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 83

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 12

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

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