I need to make a readonly input just appear more or less like a block level element. However, I don't want to just set the width to 100%, I need it to behave as if the content adjusts the width automatically like it normally would.
CSS:
input:read-only, textarea:read-only {
border: 0;
outline:0;
height: auto;
text-indent: 0;
width: auto;
margin-left: 10px;
float: left;
margin-bottom: 7px;
font-weight: 300;
display:block;
}
To make this clear, I'm trying to make an input behave like the following would:
<div>
someone#somelongdomainbecausewhynot.com
</div>
It's close, although the initial default browser 'width' of the input field restricts or appears as if the input has an overflow set. I've tried setting the overflow too but this also didn't work.
I would like to keep this limited to CSS only, I don't want to have to use javascript here.
UPDATED DEMO: http://jsfiddle.net/hhz17uww/6/
As I understand it you want the input to fill the width of the container, but using width: 100% isn't ideal as the parent may have margin or padding. If this is the case use:
input:read-only {
box-sizing: border-box;
width: 100%;
}
Now the input element will take up all available space and take into account the parents margin and padding.
For more info on box-sizing read Paul Irish's post box-sizing border-box ftw
Here You can follow this rule to achieve your assignment.
The inherit CSS-value causes the element for which it is specified to
take the computed value of the property from its parent element. It is
allowed on every CSS property. For inherited properties, this
reinforces the default behavior, and is only needed to override
another rule.
<div class="wrapper">
<input type="email" name="email" class="emailField" readonly="readonly" value="someone#somelongdomainbecausewhynot.com" />
</div>
<p>someone#somelongdomainbecausewhynot.com</p>
input:read-only {
border: 0;
width: inherit;
display:block;
margin: 1.12em 0 ;
font-size: 100%;
font: inherit;
}
This will inherit Parent element<div> width, Any How we need to customize width of Parent.
Working Demo Here
Your styles are not being applied because you are using a pseudo selector that doesn't exist: :read-only. You can use the classname or another selector. Here's an updated fiddle using .emailField.
http://jsfiddle.net/hhz17uww/4/
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
Now im having an input text element which be warpped by a div container (form-group)
And i set the width to the input text element become 100% (width: 100%). And i expect that the input text it will cover the entire width of the form-group div element. And the result is kinda weird to me. The input text, it likes it flow out of the form-group element, like the this picture here:
In this picture, im currently hover the form-group element, and you can see the orange part, is the margin of the it, but you can see, the input text element, the part i highlighed is like overlaying the margin of the form-group element, which proved that the input text element is flow out of the container element of it, which is the form-group element. And that's weird, at least to me, because I set the width to 100%, and so i think it should be cover the container element of it. Please help me to understand this.
I know i can use the overflow property to fix but, i want to know why this is happening, so hopefully, someone can help me with this, thank you so much.
.form-container {
background-color: black;
padding: 20px;
}
.form-group {
width: 50%;
font-size: 1.5rem;
background-color: red;
margin: 3rem auto;
display: block;
}
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
<form action="#" class="form-container">
<div class="form-group">
<input type="text" placeholder="Enter text...">
</div>
</form>
This happens because by default the box-sizing property is content-box.
When you add padding to the input element, the input element size remains equal to the size of form-group div.
But, this increases the overall width of the input element and extends it outside as the padding adds up to the total width. It looks like the actual width of the input element has increased but actually just the padding is adding.
You can change this if you wish to, by changing the box-sizing to border-box. This way the padding gets added to the input element by compromising the actual size of the input element.
input {
box-sizing: border-box;
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
Also, after adding border-box, you can try adding some height to the form-group div to visualize their comparative heights.
Use this developer tool on your browser to help you see the width, padding and margins.
You are coming up against box-sizing.
The input has quite a noticeable padding added to it (3rem horizontally in all). While the basic element takes up the width of its parent on the width: 100% setting, the box-sizing is set to content by default in CSS. This means any padding (and borders) is outside the basic size.
Changing the box-sizing to border-box for the input means that the padding is included within the overall size so you get the width you expect - in total 100% of the parent:
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
box-sizing: border-box; /* ADD THIS */
}
In html every elements have default padding and margin property..we overlapped this values.
use following code..to avoid these kind of issues.
* {
padding: 0px;
margin:0px;
box-sizing:border-box;
}
in chrome, I thought the height of .wrap should be 24px.
it is 25px when the vertial-align is set to middle. can someone explain why?
answer in this article
body {
line-height: 1.5;
}
.wrap {
font-size:16px; /* 16*1.5= 24 */
}
.btn {
font-size: 14px;
padding: 4px;
line-height: 1;
box-sizing: border-box;
border: 1px solid blue;
vertical-align: middle;
}
<div class="wrap">
<button class="btn">
OK
</button>
</div>
As It is explained Here
Aligns the middle of the element with the baseline plus half the
x-height of the parent.
The line-height of your .wrap element is by default 1.5 that inherits from the body, the vertical align property will render depending on your line-height, so if the line height is bigger than your wrapper element, you will see the effect. to fix it just put line-height in your .wrap class, you can play with it to see how the line-height affects the vertical alignment.
body {
line-height: 1.5;
}
.wrap {
line-height:1;
background:red;
}
.btn {
font-size: 14px;
padding: 4px;
line-height: 1;
box-sizing: border-box;
border: 1px solid blue;
vertical-align: middle;
}
<div class="wrap">
<button class="btn">
OK
</button>
</div>
Inline elements (for whatever reason) are surrounded by whitespace.
Changing the element to display: block will fix your problem but there are other ways to fix it whilst keeping it inline.
One way would be to set font-size: 0 on the .wrap element as the whitespace is governed by font size. In this instance that would be fine as you are setting a font size on the child button (beware when using ems as they are relative to the parent font size).
More options can be found here - https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Solving the problem:
Simply you're getting the extra pixel because of this:
body {
line-height: 1.5;
}
All your HTML elements are inheriting this attribute from the body.
Answering the question:
why the height of the out div is affected by vertical-align
The <button> default display attribute is "inline-block", which gets affects by white-spaces, line-height, font-size, and other text-related CSS attributes. vertical-align is one of these text-related attributes. For example, if you change the button's display to "block" you can see that it no longer affects the .wrap's height.
Please give block CSS for the btn
.btn { display: block;}
Why block and not inline-block??
Elements in the inline formatting context will cause white spaces from carriage returns and white-spaces in your HTML
The inline-block value is incredibly useful when wanting to control margin and padding on "inline" elements without the need to block and float them. One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words.
So thats OK!
I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.
Here is what I want to achieve:
Fiddle: http://jsfiddle.net/GRQNh/
CSS:
body {
height: 960px;
}
.breadcrumbs {
position: relative;
background-color: #eee;
height: 10%;
}
.name {
color: #000;
margin-top: 50px;
}
Thanks.
DEMO or you may be try with padding-top instead margin-top as follows
.name {
display:block;
color: #000;
padding-top: 50px;
}
Since .breadcrumbs has position: relative, set position: absolute; to .name.
JSFiddle
You need to add display: inline-block; to get the margin to work.
For instance,
.name {
color: #000;
margin-top: 50px;
display: inline-block;
}
Hope this helps.
For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.
However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).
Luckily, there is a css value for display which does exactly what you need:
display: inline-block;
Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.
You can also give up on margins at all and use padding-top: 50px.
in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;
the <span> is an inline element. That means you cant apply margin or padding to it.
For the solution to your problem you have -at least- two options.
1.Change the container of your text to a block element, like <div>
so:
<span class="name">Name</span>
will become
<div class="name">Name</div>
2.Change the behavior of your span by making it a block or inline-block element with this css:
.name {
display:inline-block
/* rest of your css */
These two articles will give you a good idea of what is inline and block
http://www.impressivewebs.com/difference-block-inline-css/
http://css-tricks.com/almanac/properties/d/display/
i have a Tablecell with an Inputfield in it. The Inputfield should fill up the Tablecell but not reach into its padding. What i have looks like this (with firebug):
I want the inputfield to be kept inside the blue area and not raching into the purple one.
And: Of course i read all the questions here on this topic first. I read all of it and i could not find any answer which actually solved that.
It should work in all modern browsers (ie7 as well);
I made a minimal live Example with jsfiddle where i tried all the solutions in the other questions but i just could not get this to work. a) Is there a working solution for this? and b) Is there even a nice and non-workaroundish solution for this?
Why is this a problem in all browsers? I think this is a wrong specification in CSS. Because if i say "100%" of course i want the element to fit "100%" of the CONTENT Area. What is the use case for letting it flow into paddings and margins?
Well, here you go..
I'm using the exact same method as this answer.
See: http://jsfiddle.net/AKUsB/
CSS:
.inputContainer {
background: #fff;
padding: 3px 3px;
border: 1px solid #a9a9a9
}
.inputContainer input {
width: 100%;
margin: 0; padding: 0; border: 0;
display: block
}
HTML:
<div class="inputContainer">
<input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>
The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).
To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:
input { width: 100%; padding: 0; }
Or
input { width: 90%; padding: 0 5%; } /* width totals 100% */
Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.
I think you should try to use
box-sizing: border-box
I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.
Basic example code:
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.
You can use box-sizing:border-box to take care of this. Just put the following in your css file:
input{box-sizing:border-box}
It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.
Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw
The points he makes about padding also apply for the border.
There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)
This did the job for me :
input {
padding: 0.2em;
box-sizing: border-box;
width: 100%
}
Try to give input width : 100%; box-sizing: border-box;
unfortunately this will depend on the browser you are working with but setting the width of the object (the textbox) does not take into account the width of the border on the object. most browsers only take into consideration any padding from the outer object and margins from the contained object but a few (i'm looking at you IE) do not add in the border when calculating percentages;
your best bet is to change the border on the textbox or to throw in another div between teh textbox and the container with a padding of say 2px with a margin-top: -2px and a margin-left:-2px (i'm guessing at the border width)
I'm assuming that you want the contained element (<input>) to be smaller than, or contained entirely within, the <div>?
You can either:
input {width: 50%; /* or whatever */ }
An html-element's width is calculated (I think) as the defined width + borders + margin + padding
If you've already defined the input as having 100% width of the parent, and then the other attributes are added it will definitely overflow the parent div.
You can set the margin/padding/borders to 0, but that would likely not look good. So it's easier, though not necessarily perfect, just to use a suitably-smaller width.
You could, of course, use
#parent_div {overflow: hidden; /* or 'auto' or whatever */}
to hide the portion of the input element that would normally overflow the container div.
Please apply the following css to your input elements.
{
box-sizing: border-box;
width: 100%;
}
if you use bootstrap or other css library, it will be not problem.
I know this post is fairly old, but it's a common problem and no one posted any good answers...
The following HTML code looks fine. But when I add the doctype, the problem appear
div.field_container
{
height: 25px;
width: 150px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
To fix the width / height problem, you can add padding to your field_container, but that will make the container bigger.
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
padding-right: 4px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
If you can't change the container width, you can also use the following trick, but that will still increase the height
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>
Instead of applying the style directly on the input element, maybe abstract the CSS into a file and use classes:
div.field_container
{
height: 25px;
width: 150px;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
I am running out the door before I could test if this helps at all, but at the very least, you could play with max-height/width settings on the DIV css to make it not break if my solution doesn't work. And having the CSS abstracted like this makes problems easier to solve using a plugin like Firebug in Firefox.
Question though, is there a need to enclose the input tag in it's own DIV? I wouldn't be surprised if there is just a better layout you could build that would avoid the need to do this...