The textarea in this codepen and the code below overflows in slim viewports. It has max-width: 100% from .preset-box but when the textarea is larger than the viewport it causes the viewport to overflow horizontally. I tried both changing and removing cols both to no avail. I tried restricting the resize to vertical and that had no effect on this issue either. How can I adjust the CSS to respect max-width?
<label class="preset-box block-table font-os">
<span class="preset-box block-table" data-spacing="mb1">Ask</span>
<textarea aria-invalid="false" class="preset-textarea p1 pl2 pr2 font-textarea round-medium border-1px border-solid" cols="100" rows="4" data-spacing="mb1 mb0-last">Am I overflowing?</textarea>
</label>
Remove this class:
block-table
max-width applies to block elements only, but block-table makes these table elements.
Related
I am using bootstrap for layout. I have set max-width on the input control to 280px. But this causing input-group-addon not render properly when i use bootstrap's grid column size larger than 280px. input-group-addon does not stick with the control.
I have JSFiddle here
I guess input-group-addon always renders to the right of the column so there is a space between input control and addon.
How do i fix this without messing with max-width and col.
In your fiddle an .input-group-addon has width 32px, and both of .form-control (max-width: 280px;)and .input-group-addon (width: 32px) are included in the .input-group, then you just need to define max-width for .input-group:
.input-group {
max-width: 312px;
}
jsfiddle
I would NOT recommend to set the width of max-width of your inputs (or any other element), within Bootstrap.
Bootstrap elements are designed to fill all the available space. They can be made responsive very easily by using the built-in grid system. My recommendation is to limit their width by limiting the width of their container, like this:
<div class="row">
<div class="col-xs-6"><!-- NOTE THE 'XS' HERE -->
<div class="input-group">
<input name="FirstName" class="form-control" id="FirstName" type="text" value="399035034">
<span class="input-group-addon">+</span>
</div>
</div>
</div>
https://jsfiddle.net/v85wzajr/2/
For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
<br />
</span>
</span>
And css:
.label {display: inline-block;}
Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?
DEMO
Adding white-space:nowrap; should fix it:
.label {
background-color: yellow;
display: inline-block;
white-space:nowrap;
}
jsFiddle example
Firefox renders this incorrectly.
Inline blocks should use the shrink-to-fit algorithm:
calculate the preferred width by formatting the content without
breaking lines other than where explicit line breaks occur,
calculate the preferred minimum width, e.g., by trying all possible
line breaks.
find the available width: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is:
min(max(preferred minimum width,available width), preferred width)
In this case:
preferred width is the width without any word wrapping.
preferred minimum width is the width of the widest element, in this case "1,22."
available width is the width of the document body, in this case 100%.
min(max(preferred minimum width,available width), preferred width) should therefore be equal to preferred width.
You can fix Firefox's behavior by changing your HTML or by using white-space:nowrap.
But I have another alternative: br is an inline element, but changing it to a block element fixes the problem.
Doing so shouldn't have an impact on any other br elements in your HTML (that I can think of).
Fiddle
What's happening is Firefox is interpreting your second span as being inline with the <br/> element. Try putting the <br/> element outside of the span wrapping the 2 spans like so:
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
</span>
<br />
</span>
http://jsfiddle.net/gc0sq29k/12/
I have a simple HTML form with only two elements -- a text box and a submit button -- that need to be horizontally aligned.
The button has a background image, and I would like to set its value="".
In Safari and Firefox, the alignment is maintained if I set the line-height on the elements.
In Chrome, however, this is not enough. I have to set the value=" " (note the space), or give it another text value. Otherwise, the elements shift.
This is the HTML and css
<form>
<input type="text" id="email" class="textBox" />
<input type="submit" id="submitSubscribe" class="submitButton" value="" />
</form>
.submitButton{
width:30px;
line-height:30px;
background:url('');
}
.textBox{
line-height:30px;
}
#email{
width:146px;
}
Here is my jsfiddle:
http://jsfiddle.net/EmCQJ/5/
Does anybody know why Chrome calculates the alignment differently with the text in the value attribute than when the value is blank? Leaving that space in the value feels like a hack solution to me, but I've tried all the obvious css fixes and still can't get it working. Any input is greatly appreciated. Thanks!
This should do it: http://jsfiddle.net/EmCQJ/38/
The key here was
vertical-align: text-top;
It seems the input-text and input-image elements have different baselines (the default setting for vertical-align) but the same text-top line.
You should manually set the margin, padding, and border of the input-text element because different browsers have different defaults. When doing this, remember height is the size of the element less the margin, padding, and border so if you want a total height of 30px make sure to subtract 1px from the top and 1px from the bottom giving you a CSS height of 28px.
Quick CSS Question. I cannot seem to figure out a very simple CSS/HTML problem. Here's a JSFiddle.
http://jsfiddle.net/BmM6t/
Basically, these two divs are not resizing to anything less than 100% width:
<div id="main_pic" class="main_div">
THIS IS WHERE THE MAIN PIC WILL GO.
</div>
<div id="signin" class="main_div">
SIGN IN TO THE SITE!
<form>
<label for="name">EMAIL/USERNAME:</label>
<input type="text" name="name" id="name">
<label for="email">PASSWORD:</label>
<input type="text" name="email" id="email">
<br />
<input type="submit" value="Let's Play!">
</form>
</div>
You'll see that the two divs with class main_div actually take up the entire width of the screen for some reason (you can see that if you inspect the element) even though their widths are clearly written. When you try to change the width of one of the main_div's it changes the width but if you inspect the element, it just changes the width of the object and adds padding around it to make sure it still takes up the entire width of the screen.
I'm sure it's some little error I've made but I can't find it. Thanks for the help!
That's how divs work, they are block level elements. If you don't want them to take up the entire with of its container element you can float it or make it inline-block
Use a overflow: hidden; to the .main_div so that you can see that it is resizing but not hiding the contents.
I'd like to center a submit button. How do I accomplish this? I dont know the width of the button, it may be flexible based on the text inside it. I'm trying not to use float and set the margin auto on it because that will require a width.
<input type="submit" value="may vary" />
If the width is variable, your best bet is to use the text-align property of the container. If that would effect other sibling elements in an undesirable way, consider wrapping the input in a div.
<div style="text-align: center">
<input type="submit" value="may vary" />
</div>
NOTE: The inline CSS above is just an example, feel free to create a css rule for the div.