I need to have my div have the same width as the parent div, however my width: inherit does not do the job. When I do inspect element, there is
<span class="..." id="..."> == $0
in between the divs. Please let me know if you need more info
CSS:
.Select--multi {
.Select-value {
background-color: #ebf5ff;
/* Fallback color for IE 8 */
background-color: #FFF;
border-radius: 2px;
border: 1px solid #c2e0ff;
/* Fallback color for IE 8 */
border: 0px solid rgba(0, 126, 255, 0.24);
color: #000000;
display: list-item;
font: 16px Roboto;
line-height: 1;
margin-left: 5px;
margin-top: 2px;
vertical-align: top;
list-style-type: none;
list-style-position: inside;
width: inherit;
}
Don't use width: inherit in the child element. Just use width: 100%. Then the child element will stretch to the parent width if have the display: list-item property set.
First, the provided code snippet is not CSS. you are either using scss or less.
Second,The inherit keyword specifies that a property should inherit its value from its parent element. That means your parent element should have defined the corresponding property to get it effect it in the child element.
The answer is to set width:100%; in the child element style.
Related
I have the following code. It's a simplified code of a responsive design: In a certain screen size I want to show only the icon (blue - via ::before) but not the text.
When I try to hide the mail address via font-size: 0 (there will be an icon in the ::before) - the header grows in height.
Sure I could use max-height - but is there a cleaner solution?
Fiddle: https://jsfiddle.net/xs2wre4r/
<div class="header">
<span class="store-contact-email">
info#example.com
</span>
</div>
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com">info#example.com</a>
</span>
</div>
Left .header frame is computed = 25px
Right .header frame is computed = 30px
.header {
float: left;
}
.header .store-contact-email a:before {
line-height: 18px;
vertical-align: -36%;
padding-right: 5px;
background-color: blue;
width: 30px;
display: inline-block;
}
.header .store-contact-email a:before {
content: "x";
}
.store-contact-email {
border: 1px solid red;
}
.store-contact-email a {
font-size: 18px;
}
.store-contact-email a.hide {
font-size: 0px;
}
The problem is with the font sizes of the ::before blocks.
Since the second one has a font size of 0 and a line height of 18, it will be vertically positioned around the baseline, with 9px above and 9px below. The first one (with the normal font size) will be positioned normally (depending on the exact font), with, say, 14px above and 4px below.
(You also have vertical-align on the ::before, but that doesn't change the situation; it moves both ::before blocks 6.48 pixels down.)
So since the second one is located 5px lower than the first one, the bottom of the bounding box will be pushed down by 5px.
To illustrate,
span {
font-size: 18px;
border: 1px solid red;
background: rgba(255, 255, 0, .4);
}
span::before {
line-height: 18px;
vertical-align: -36%;
border: 1px solid blue;
background: rgba(0, 255, 255, .4);
width: 30px;
display: inline-block;
content: "x";
}
span.hide {
font-size: 0;
}
<span>visible</span>
<span class="hide">invisible</span>
Solution: don't use the font-size:0 trick.
You can set font-size of ::before, as it's inheriting parent font-size.
.header .store-contact-email a:before {
content: "x";
font-size: 18px;
}
Or you can use display or visibility, just avoid :before to inherit that property.
wrap the text with span and hide the span
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com"><span>info#example.com</span></a>
</span>
</div>
.store-contact-email a.hide span {
display:none;
}
Better to:-
(1) nest the text info#example.com inside another span, which will display:none under a breakpoint; or
(2) put the icon on .store-contact-email:before instead of .store-contact-email a:before.
The reason is that browsers often enforce a minimum font size for accessibility purposes.
I think the main problem is that I'm confused about the padding, border and margin interactions.
I have read about each of these style attributes on their own but I'm having trouble combining all of them successfully inside of a table.
For one, I'm setting attributes on the contents in the cell, and then on the cell themselves. I'm not sure when to do which.
For two, I can use percent or pixels. For my needs I think percent would work well, since the text in the orange box is going to be of variable lengths (as will the header text).
Now, the part of the code that I can't get to work correctly is that the display: inline-block element (including padding, border, and margin) overflows the cell. Obviously I want the first header to be centered over the contents below, and I want each of the orange buttons to be visually centered with a small margin between them and the cells to the right.
I see there's a box-sizing style solution, but I need this to be compatible with IE6.
http://codepen.io/kokeefe/pen/dMmPMp
a.TableButtonStyle:link {
display: inline-block;
border-style: solid;
border-width: 3px;
border-color:rgb(240,80,40);
border-radius: 10px;
vertical-align: middle;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
color: white;
text-decoration:none;
background-color: rgb(240,80,40);
font-weight: bold;
width: 100%;
padding: 5%;
font-size:14pt;
}
a.TableButtonStyle:hover {
background-color: white;
color: rgb(240,80,40);
}
a.TableButtonStyle:active {
background-color: rgb(213, 57, 15);
color: white;
border-style: solid;
border-width: 3px;
border-color: rgb(213, 57, 15);
}
a.TableButtonStyle:visited {
background-color: rgb(213, 57, 15);
color: white;
border-style: solid;
border-width: 3px;
border-color: rgb(213, 57, 15);
}
.FontFormat{
text-align:center;
vertical-align:middle;
font-size: 13pt;
margin: 5px;
}
.Bold
{
font-weight: bold;
}
Updated CodePen
What you need is:
box-sizing: border-box;
Apply this to a.TableButtonStyle.
Quoting from MDN docs:
border-box:
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
CSS box-sizing property MDN docs
I have different css classes based on different actions. Everything is working good, but when I apply activeBackground class based on condition its making div background-color to green but border-left-color is not coming green its still using .arrow-div class. How can I resolve this issue and apply .activebackground class when needed?
HTML
<div class="text-arrow" ng-class="{'activeBackground': applyActiveFile, 'completeBackground':applyComplete}">File Selection
<span class="arrow-div"></span>
</div>
CSS
.text-arrow {
background-color:#BABABA;
color:#fff;
display:inline-block;
padding-left:45px;
}
.arrow-div {
border-style: dashed;
border-color: transparent;
border-width: 0.15em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #BABABA;
left:0.25em;
}
.activeBackground{
background-color: green;
border-left-color: green !important;
}
It appears to me that you're applying .arrow-div and .activeBackground to different elements, and the way your code is written, .activeBackground can't override .arrow-div because it's being applied to a different element (the parent). To affect the child element (the span containing the arrow) you need to set up a css rule that directly targets any child .arrow-div of .activeBackground.
My solution was to simply modify your css like so, providing a way to change the arrow div:
.activeBackground{
background-color: green;
}
.activeBackground .arrow-div{
border-left-color: green;
}
Here's a fiddle of it in action:
https://jsfiddle.net/cupno5g9/
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
I have: http://jsfiddle.net/Gkz4v/9/
.pagination li a {
float: left;
width: 6px;
height: 6px;
line-height: 6px;
margin-right: 3px;
text-indent: -9999px;
background-color: #4b4b4b;
}
In the class above, if I remove line "float:left", result is displayed differently than if the line is there. Please try it in my fiddle above.
I want items on different lines with the effect of "float:left"
Can you please explain how does this work?
The effect that you describe, would be the size of the elements? You're trying to do something like this: http://jsfiddle.net/Gkz4v/10/
It is necessary to add a display: block in <a>. This is necessary because <a> is an element with display: inline and inline elements do not respect size rules.
The a tag is an inline element by default, which do not obey widths and heights. floating an element is one way to make it obey widths (which is why you noticed the effect), but in this case, you can just change the display to block to get your desired look.
.pagination
{
padding: 3px 0 3px 3px;
}
.pagination li a
{
display: block; /* change here */
width: 6px;
height: 6px;
line-height: 6px;
margin-bottom: 3px; /* changed the margin too, so it's nice and spaced out */
text-indent: -9999px;
background-color: #4b4b4b;
}
.pagination li.on a
{
background-color: #1f84e3;
}
ol { list-style: none; } /* JSFiddle adds this automatically I think, but in the general case, this will remove the dots in the list */
Working example.