I'm using bootstrap input-append add-on to add a icon to the end of the input field. This all works nicely. The issue is setting a width of 100% on the input pushes the add-on span tag outside the parents "input-wrapper" div viewable area.
I'm using box-sizing: border-box; on all input fields.
the only way I can seem to make this work is setting the parent div "input-wrapper" to display: flex; Unfortunately this is not an option as it's not supported in IE8 or 9. What other options do I have.
http://jsfiddle.net/chapster11/zjx2zc6e/
Example code.
<div id="form-elements">
<div class="input-wrapper input-append">
<input id="paymentDate" class='paymentDate' type="text" />
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
CSS CODE
#form-elements{
margin: 20px;
}
input[type]{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 30px;
}
#paymentDate{
height: 30px;
width: 100%;
}
.input-wrapper{
width: 600px;
border: 1px dashed red;
}
Edit: My bad, on Bootstrap2 there was an issue with the "input-block-level" feature working with addons (it works for all other inputs). A few people came up with some workarounds, mainly using a table display. You can see here:
https://jsfiddle.net/BMironov/BVmUL/
Here is the CSS that handles it - you may want to play around with the way the add-on span works.
.input-append.input-block-level {
display: table;
}
.input-append.input-block-level .add-on {
display: table-cell;
width: 16px;
}
.input-append.input-block-level > input {
box-sizing: border-box;
display: table;
min-height: inherit;
width: 100%;
}
.input-append.input-block-level > input {
border-right: 0;
}
Instead of setting the input to 100% width, add the class input-block-level to the text input. You shouldn't need any additional CSS, that functionality is built into Bootstrap 2.
It's obvious that if one of your nested element input is set with 100% width, your other nested element span will get outside the wrapper, which total width is being occupied by input.
Related
What's the reason the inputs do not align with the button and other elements?
Layout (Firefox Developer Edition) shows that the sizes of input and label elements differ even though they are in the same div.
What causes this? And how to align them in an elegant way (without changing margin through trial and error for example)?
Relevant section of NewTransaction.js file:
CSS file of NewTransaction:
SOURCE CODE: https://github.com/yanichik/react-course/tree/main/full-course/expense-tracker-v2
Because the input element has padding of 2px on both left and right, and as default in user agent stylesheet, box-sizing is set to content-box.
content-box gives you the default CSS box-sizing behavior. If you set
an element's width to 100 pixels, then the element's content box will
be 100 pixels wide, and the width of any border or padding will be
added to the final rendered width, making the element wider than
100px.
You should use box-sizing: border-box to overcome this issue.
Reference: https://www.w3schools.com/css/css3_box-sizing.asp
Your updated code: https://codesandbox.io/embed/expense-tracker-yan-forked-80tfk?fontsize=14&hidenavigation=1&theme=dark
It's better to normalize the styles,
in your code the style that made problem was box-sizing, I just set for all element to border-box, however you can just add box-sizing: border-box; to input and it works too.
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.form {
margin-top: 15px;
}
input {
display: flex;
width: 100%;
}
label {
display: flex;
justify-content: flex-start;
}
button {
display: block;
width: 100%;
margin-top: 5px;
background-color: purple;
border-color: purple;
color: white;
font-weight: bold;
}
.amount,
.description {
/* display: flex; */
flex-direction: column;
margin-bottom: 5px;
margin-top: 5px;
}
<div className="form">
<form onSubmit={submitHandler}>
<div class='description'>
<label htmlFor="description" pointing="true">
Description
</label>
<input type="text" id='description' placeholder="Type Something" ref={descrRef}/>
</div>
<div class='amount'>
<label htmlFor="amount" pointing="true">
Amount
</label>
<input type="number" id='amount' step="0.01" placeholder="$" ref={amountRef} />
</div>
<div>
<button type="submit">Add Transaction</button>
</div>
</form>
</div>
Here the demo: https://stackblitz.com/edit/react-ishkxp?file=index.js
When you will click on the cross you will see there is remaining space around the cross. I would remove this space.
I would that when I click on the cross the container fit at the maximum the cross instead of letting go remaining space.
I have tried:
box-sizing: border-box
height: auto;
absence of width precision to just create content depending of height
using a letter instead of an image with font-size to ensure it is the size of the letter that is taken in account.
reset button and span styles.
play with letter spacing and em.
play with display:flex
I am wondering if this is the font that make the component remain with space.
Here my ReactJS' snippet:
.container {
height: auto;
width: auto;
box-sizing: border-box;
display: flex;
}
.cross {
display: block;
height: auto;
font-size: 4em;
box-sizing: border-box;
}
<button class="container">
<span class="cross" >×</span>
</button>
If I understood your question your question correctly, you'll want to define a line-height for the .cross, so that there is less space above and under the cross glyph. Also, prehaps the browser's default padding is what causes the unwanted space. So you might want to consider setting padding: 0 as well.
And overflow: hidden; for the .container, to make the button adjust to the new height.
.container {
height: auto;
width: auto;
box-sizing: border-box;
display: flex;
overflow: hidden; /* Added */
padding: 0; /* Added. Removes the browser's default padding of buttons. */
}
.cross {
display: block;
height: auto;
font-size: 4em;
box-sizing: border-box;
line-height: .6; /* Added. Adjust value based on font and glyph. */
}
on the span for your cross add the following css:
line-height:.5
vertical-align:middle
very common question I know, but I'm still struggling having read similar questions.
I have two divs (containing a variable height text box paragraph and a fixed height image) within a container div, as follows:
<div class="error-row row">
<div class="error-value-col">
<p class="error-value">{{error.message}}</p>
</div>
<a class="cross-link">
<img class="cross" src="/assets/cross.png" alt="close">
</a>
</div>
The accompanying LESS file is:
.error-row {
border: 1px solid #po-yellow;
border-width: 0px 1px 1px 1px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
margin: 0px;
.error-value-col {
float:left;
vertical-align: middle;
display: inline-block;
width: calc(~'100% - 70px');
.error-value {
font-size: 10px;
padding: 5px;
p {
margin-bottom: 0px;
}
}
}
.cross-link {
padding: 0px;
float: right;
vertical-align: middle;
display: inline-block;
height: 70px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 28.5px 27.5px 26.5px 27.5px;
color: black;
}
}
}
I've tried several different combinations of settings but none seem to work. I want whatever the element with the smallest height is (out of the image and text box) to centre alongside the taller element.
Thanks all.
EDIT: Clarification...I want the error-value-col and cross-link to be centred on the error-row container. This will of course be sized to the largest element out of the two, which could be either.
I changed approach and use display:table and display:table-cell to obtain desired behaviour. Look at this updated jsFiddle to see if it's acceptable for you (converted LESS in CSS there).
Apart design rules, relevant new ones to LESS code are the following:
.error-row {
...
display:table;
width:100%;
.error-value-col {
...
display:table-cell;
vertical-align:middle;
.error-value {
...
p {
...
}
}
}
.cross-link {
...
display:table-cell;
width:70px;
vertical-align:middle;
img.cross {
...
}
}
}
Please refer to jsFiddle to see all differences including erasing of floating.
ALTERNATIVES:
Vertical aligning is (strangely) an hard topic in CSS, at least if
you don't want to use relatively new Flexbox model.
Generally a very common method is to absolute positioning inner DIV
with top:50% but due to fact that reference point is top-left
corner, then you have to push up it of "half of its height" with a
negative margin-top. This requires to have a fixed height of inner
DIV, in order to set this negative margin to half of it.
I have a problem where setting width: 100% to inputs inside a container extends more than the container capacity. This problem doesn't seems to happen with buttons though:
<form>
<input type="text" class="input"></input>
<button>Button</button>
</form>
CSS:
form {
max-width: 200px;
border: 1px solid #eee;
}
.input, button {
width: 100%;
}
In this example, the button correctly fills the container, however the input extends a bit further:
How can I fix this?
I've created a codepen: http://codepen.io/jviotti/pen/qfFmH
You can fix this adding
.input, button {
width: 100%;
box-sizing: border-box; /* add this */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
box-sizing - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Google Chrome seems to have a bug when overflowing content inside of a fieldset.
Here is a jsfiddle that demonstrates the problem: http://jsfiddle.net/Dismissile/Lnm42/
If you look at the page, you will see that when you have a container inside of a fieldset, and the container has overflow: auto set, and that container has content that will overflow horizontally, the fieldset actually expands instead of using a scrollbar:
<fieldset class="parent">
<div class="child">
<div class="grandchild">
asdf
</div>
</div>
</fieldset>
<div class="parent">
<div class="child">
<div class="grandchild">
asdf
</div>
</div>
</div>
CSS:
.parent {
border: 1px solid green;
padding: 20px;
margin: 20px;
}
.child {
border: 1px solid red;
padding: 20px;
overflow: auto;
}
.grandchild {
border: 1px solid #ccc;
width: 2000px;
padding: 10px;
}
Is there a CSS hack/fix I can use so that content overflows properly when inside a fieldset in Chrome?
UPDATE:
As of a recent Chrome for MS Windows update (v28 maybe? Haven't tracked it down yet), auto is no longer a valid value for min-width, and this solution no longer works!
New solution:
Using inherit instead of auto appears to fix the issue for all cases I have tested so far. (Including the original fiddle.. see the new fiddle fix for details.)
The updated fix: FIELDSET {min-width: inherit; }
Original answer:
Chrome defines for fieldset the default user agent style: min-width: -webkit-min-content.
So when your viewable area (aka "screen") is smaller than your div with specific width, the -webkit-min-content grows the fieldset to accommodate the size of the contents (plus padding, etc.).
The fix: FIELDSET { min-width: auto; }
I fixed your fiddle, try it out!
Using a pseudo fieldset (aka <div class="fieldset"></div>) I believe you can get close. See jsfiddle.
Try this styling:
fieldset,.fieldset {
margin: 10px;
border: solid 1px black;
position: relative;
padding: .5em;
}
.legend {
left: 0.5em;
top: -0.6em;
color: black;
position: absolute;
background-color: white;
padding: 0 0.25em 0 0.25em;
}
It is less than ideal as fieldset styling needs to be duplicated, but for me it was the only tolerable solution to my run-in with this problem that I have been able to come up with. As above you may be able to apply your existing fieldset styling to the pseudo one.
Try:
fieldset {
display: table-cell;
min-width: 0;
box-sizing: border-box;
}
This is your example with fix: http://jsfiddle.net/2u3a9goc/
Using JavaScript to set the width of the viewport:
http://jsfiddle.net/Lnm42/2/
I added a class called fieldset-width to the fieldset:
<fieldset class="parent fieldset-width">
Then added this JQuery code:
$(document).ready(function() {
$(".fieldset-width").css("width", $(window).width() - 82);
});
$(window).resize(function() {
$(".fieldset-width").css("width", $(window).width() - 82);
});
My only comment is that I can't think of a good reason to interfere with the default fieldset functionality. I dislike "scroll bars within scroll bars" to begin with. For input fields, which fieldsets usually surround, I would be especially cautious about making the user scroll around to get to all the input fields.
You can add style="display:table-column;" to the fieldset as a workaround.