Here is that example:
http://codepen.io/anon/pen/bVBNOE
.form-element__field-container {
#include display(flex);
max-width: 200px;
}
input {
border: 1px solid black;
border-left: none;
border-right: none;
padding: 10px;
}
.form-element__input-prepend {
border: 1px solid black;
border-right: none;
padding-left: 10px;
}
.form-element__input-append {
border: 1px solid black;
border-left: none;
padding-right: 10px;
}
<div class="form-element__field-container" >
<span class="form-element__input-prepend">
<span>$</span>
</span>
<input class="form-element__input-container form-element__input m-text m-has-prepend m-has-append" placeholder="???" value="23.43" type="text">
<span class="form-element__input-append">
<span>this is long</span>
</span>
</div>
In chrome, all the elements are contained with in the 200px width that is defined for the root element however in Firefox, the elements in the root element equal to 224px and overflow the root element's 200px width. The biggest difference is that in FireFox the input element is 149px width but in Chrome it is 117px.
Anyone know what would be causing this issue?
Related
Is there a way to see more of the underlying logic by which a browser does its layout? I want to see the line height of everything (border does not show line-height). Chrome and FF inspectors only show the box model (content-box, padding, border and margin).
<p>
<span>Top</span>
</p>
<span id="weird-wrapper">
before
<span> hello <a class="tall_link">link 2</a> world! </span>
<span class="bf">Big font</span>
after
</span>
<p>
<span>Bottom</span>
</p>
p {
background-color: purple;
}
.tall_link {
line-height: 40px;
background-color: green;
border: 1px dotted black;
}
.bf {
background-color: red;
font-size: 100px;
line-height: 50px;
padding-top: 20px;
padding-bottom: 10px;
border: 1px solid black;
outline: 1px dashed orange;
}
For example: https://jsfiddle.net/jackquack/1538ownx/12/
What is the line height of the span that says "Big font"?
This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Why is this inline-block element pushed downward?
(8 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I've tried all sorts of displays and positions to get all these elements on the same line, but for some reason, the button "Add" is in a weird position. Also, the center of the slash isn't horizontally aligned with the center of the boxes, it should be a little further up. The main issue is getting all of these elements on the same line, I want to somehow have their centers all be on the same imaginary horizontal line. How do I do that?
Here's the jsfiddle,
#slash {
font-size: 50px;
color: #E86B00;
display: inline-block;
}
textarea {
border: 3px solid #FF9333;
resize: none;
height: 30px;
width: 50px;
}
textarea:focus {
border: 3px solid #E86D00;
outline: none;
}
button {
height: 30;
width: 70;
color: #FFFFFF;
background-color: #FF7800;
}
button:hover {
background-color: #E86D00;
cursor: pointer;
}
button:active {
background-color: #FF8315;
border-right: 2px solid #DCDCDC;
border-bottom: 2px solid #DCDCDC;
border-top: 2px solid #ADADAD;
border-left: 2px solid #ADADAD;
}
<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id="slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();">Add</button>
You must align them with vertical-align. I have added that to the elements below.
#slash {
font-size: 50px;
color: #E86B00;
display: inline-block;
vertical-align:middle;
}
textarea {
border: 3px solid #FF9333;
resize: none;
height:30px;
width:50px;
vertical-align:middle;
}
textarea:focus{
border: 3px solid #E86D00;
outline: none;
}
button {
height: 30; width: 70;
color: #FFFFFF;
background-color: #FF7800;
vertical-align:middle;
}
button:hover {
background-color: #E86D00;
cursor: pointer;
}
button:active {
background-color: #FF8315;
border-right: 2px solid #DCDCDC;
border-bottom: 2px solid #DCDCDC;
border-top: 2px solid #ADADAD;
border-left: 2px solid #ADADAD;
}
<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id = "slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();" >Add</button>
I would recommend you keep all the element inside one div
and add these css properties to the div: display:flex, align-items:center
I have the following code snippet:
h2 { padding: 0; margin: 0; }
.middle-bar { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }
<div class="middle-bar">
<h2>TEST</h2>
<div class="above-main">
<span>test test 123</span>
</div>
</div>
I am trying to get it so that the parent (middle-bar) bottom-border does not pass under the <h2> element (so as to use the <h2> border-bottom for that section).
If I set the border-bottom: 2px solid black; to above-main class, it only underlines test test 123. If I set above-main to display: block; (or display: flex;), it acts like a block element is supposed to and makes a new line below the <h2>.
Does anyone know how to get the border-bottom: 1px solid white; from the child element <h2> to "override" the border-bottom: 2px solid black; from the parent .middle-bar element?
Thank you.
Set the border bottom on the above-main div instead of the outer div.
Edit: as you have already tried that:
Does margin-bottom: -1px on the h2 solve it?
Maybe you want this?
h2 { padding: 0; margin: 0; }
.middle-bar .above-main { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }
<div class="middle-bar">
<h2>TEST</h2>
<div class="above-main">
<span>test test 123</span>
</div>
</div>
I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
https://jsfiddle.net/ajo4boom/
How to do what I want?
I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.
Another solution would be to do the following:
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
position: relative;
top: -1px;
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Simply offset the <input> by adding
input {
position: relative;
top: -1px;
}
More info on relative positioning in CSS.
Just add vertical-align to input.
Check: https://jsfiddle.net/ajo4boom/1/
You can use your browser toolkit or the mozilla extention : firebug, to help yourself finding the origin of the problem. You would see that only input was really 17px height. Spans were, in the browser reality, 19px height.
So defining your span height to 19px would also roughtly work.
Many of the native properties of inputs will be different from those of spans. First up, you might also like to normalise border, font-family, font-size, line-height and padding.
To take advantage of the height property, define display: inline-block on both elements. Also, box-sizing: content-box will ensure they have the same box-sizing, meaning the way padding and borders will affect their height and width.
.one, .two, .in {
box-sizing: content-box;
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
font-family: sans-serif;
font-size: 16px;
line-height: 18px;
padding: 2px;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Here's a possible solution using display: inline-block;, line-height and vertical-align, but it's like #Leeish commented:
Height's are tough with inputs because browsers all like to do their
own thing
.cnt {
margin: 5px;
}
label {
display: inline-block;
}
input {
padding: 0;
}
.one, .two, .in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
HTML
<div class="wrapper">
<a href="#">
Link-1
<span class="sub-list hidden">
SubLink-1
SubLink-2
SubLink-3
</span>
</a>
Link-2
Link-3
</div>
CSS
.wrapper {
border-bottom: 1px solid #dfdfdf;
padding-bottom: 5px;
padding-right: 50px;
height: 25px;
}
.wrapper > a {
font-size: 13px;
font-weight: bold;
padding: 5px 6px;
border: 1px solid #ffffff;
border-bottom: none;
float: right;
display: block;
}
.sub-list {
background-color:#ffffff;
width: 251px;
height: 40px;
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 10px 10px 0 0;
text-align: right;
}
http://jsfiddle.net/6vAQF/1/
I want to create a menu and submenu. But when I place submenu under the a tag with a span wrapper, dom treeview appears corrupted as below image;
Why is that?
You're nesting links within a link, which is forbidden:
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Creating anchor tag inside anchor tag