I have a parent CSS property which seems cant be overwritten by !important. what other options to I have? I'm trying to get rid of the margin-left: 30 property.
Div code
.difference-ul {
margin-left: 0 !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
The parent CSS property below which is applying to the above div class
.Rte ul, .Rte ol {
margin-left: 30px;
padding-left: 0;
list-style-position: outside;
}
Try using your code like this:
.Rte ul, .Rte ol .difference-ul {
margin-left: 0 !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
Related
I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
}
.bold {
font-weight: 600;
}
<div class = "align-right">
Purchase Date:
<span class = "bold"> 09/10/2018</span>
</div>
You need to add flex-direction: column; to the parent element in order to justify-content in IE11
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
flex-direction: column; }
The following worked for me across different browsers.
.text-vcenter-right {
height: 200px;
width: 100%;
background-color: grey;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: right;
text-align:right;
}
<div class="text-vcenter-right">Text vertically centered and justified towards right</div>
I have following situation where css flex based masonry displayed images overflowing the parent div's width. It is supposed to go downwards like a normal Masonry.... but I can't figure it out how to fix this.
I wrote my code like below...
HTML
<div class="mansory-gallery">
<div class="item">
<img src="http://minoboshitaro.com/wp-content/uploads/2017/11/51AEWKP5CQL._SX339_BO1204203200_.jpg">
</div>
</div>
CSS
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
}
.item {
width: 28%;
padding: 15px;
margin: 5px;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Please let me know how to solve this!
Thank you for your time!
Try using justify-content: space-around; instead of margins.
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
justify-content: space-around;
}
.item {
width: 28%;
flex-grow: 1;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Example - https://codepen.io/nhensh/pen/OZRgYa
Aside is used for a complete section left in a webside.
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
color: #00374b;
font-family: Verdana, sans-serif;
font-size: 0.9em;
background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
flex: 1 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-flow: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.layout_aside {
flex: 1 auto;
background-color: #004664;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
padding: 10px;
}
.element {
flex: 1 auto;
}
.layout_main_content {
flex: 1 1 90%;
min-width: 500px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
article{
flex: 1 auto;
}
<body class="flex_container">
<div class="layout_main">
<aside class="layout_aside" id="aside_menu" runat="server">
<div class="element">Test 1</div>
<div class="element">Test 2</div>
<div class="element">Test 3</div>
</aside>
<div class="layout_main_content">
<article>Article1</article>
<article>Article2</article>
</div>
</div>
</body>
For this code the flexbox definition is not working for aside. If I remove the runat="server" the flexbox is again recognized.
Any suggestion or resolution. I tried to put the runat server to a different div but this doesn´t help.
Is it possible to use display: flex; to align all items to the left (flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;) but the container it self to the center (like margin: 0 auto;)?
It seems like flex-containers are always scaled to 100% width, why the automatic margin won't work. Does anybody have an idea how to achieve what I try?
.container {
width: auto;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // IE10 uses -ms-flexbox
display: -ms-flex; // IE11
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.item {
display: block;
width: 220px;
}
EDIT: Important! While the container has an auto width!
Yes, using text-align:center on a parent (or body) and display:inline-flex instead of display:flex.
This operates much the same as the difference between display:inline-block and display:block.
MDN says:
The element behaves like an inline element and lays out its content according to the flexbox model.
body {
background: #eee;
text-align: center;
}
.inner {
display: inline-flex;
width: auto;
/* stated but not required */
background: #ccc;
padding: 15px;
}
p {
padding: 15px;
border: 1px solid red;
}
<div class="inner">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
For the parent, you can use display: inline-flex , which has the same effect as display: inline-block compared to display: block.
The flex won't claim the whole page width anymore.
You can find more information about flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to create a "simple" information bar that should be displayed inline.
The bar consist of two divs, where the first contains all the required info (and is always visible) and the second shows information messages when they apply.
I have created a pen to demonstrate here.
My problem is that the content of the upper div is not always the same width and in some cases it overflows (which is a valid behavior based on my requirements since I always want it to be in one line). Thus when the screen gets shrinked enough the upper div overflows but the below keeps a width same as the screen width and does not follow the upper div's width.
What I want to achieve is make the below div have the same width as the upper even when the upper one overflows. Any ideas anyone?
Adding code here as well for reference:
HTML:
<h2> Shrink me to see than warning div is not the same width as the other one</h2>
<div id="TaskTimeBar">
<div id='main-wrapper'>
<div class="task-time-bar-content">
<div id="time-cell">
<div class='time-container'>
<i class="fa fa-clock-o"></i>21:12
</div>
</div>
<div id="active-task-bar-main-content">
<div><i class="fa fa-link"></i> #28125</div>
<div><i class="fa fa-info"></i> This can be a long text...</div>
<div><i class="fa fa-user"></i> Yo mama</div>
</div>
<div id="active-task-bar-buttons">
<div class="active-bar-button-wrapper">
<button>Stop</button>
</div>
<div class="active-bar-button-wrapper">
<button>Switch To #28192</button>
</div>
</div>
</div>
</div>
<div class="active-task-bar-information">This is an information message</div>
</div>
CSS:
#TaskTimeBar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#main-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.task-time-bar-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 5px;
}
#time-cell {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: bold;
font-size: 22px;
}
.time-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.time-container i {
padding-right: 5px;
}
#active-task-bar-main-content {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: space-around;
-ms-flex-pack: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
}
#active-task-bar-main-content div {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
#active-task-bar-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 10px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}
.active-bar-button-wrapper {
line-height: 28px;
margin-right: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.active-task-bar-information {
background-color: #ffa500;
color: #f3ebf8;
border: thin solid #808080;
border-top: none;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
Edit:
Let me explain a little bit more based on the div's ids as asked in the comments.
I hava a #TaskTimeBar that contains two divs inside, #main-wrapper and #active-task-bar-information. Requirements are as follows:
#main-wrapper should always be in one line
#active-task-bar-information should always have the same width as #main-wrapper and be underneath it.
The problem is that when the screen becomes small the contents of #main-wrapper overflow and exceed the screen width but #active-task-bar-information does not follow. If you play around with the window width in the linked pen you will see the effect.
Just to make sure I got this right:
main-wrapper never actually wraps it's content, therefore it overflows.
active-task-bar-information content actually wraps and never exceeds the viewport.
main-wrapper's behavior is correct.
active-task-bar-information's behavior is not correct. It should behave as it's sibling #main-wrapper.
Going by these criterions I think I got it. Try this:
html { box-sizing: border-box; font: 16px/1.5 Consolas; }
body { width: 100%; min-width: 60em; height: auto; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#TaskTimeBar {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
-webkit-justify-content: stretch;
-moz-justify-content: stretch;
justify-content: stretch;
}
#main-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.task-time-bar-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 5px;
}
#time-cell {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: bold;
font-size: 22px;
}
.time-container {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.time-container i {
padding-right: 5px;
}
#active-task-bar-main-content {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: space-around;
-ms-flex-pack: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
}
#active-task-bar-main-content div {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
#active-task-bar-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 0 10px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}
.active-bar-button-wrapper {
line-height: 28px;
margin-right: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.active-task-bar-information {
background-color: #ffa500;
color: #f3ebf8;
border: thin solid #808080;
border-top: none;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
To get more accurate results I reset everything to border-box sizing, zeroed all margins, paddings, and borders. That's optional.
I changed how the parent flexbox (TaskTimeBar) contents are kept since main-wrapper and active-task-bar-information are siblings. The changes are as follows:
#TaskTimeBar {...
.....
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
-webkit-justify-content: stretch;
-moz-justify-content: stretch;
justify-content: stretch;
}
TaskTimeBar (the parent) stretches it's children (main-wrapper and active-task-bar-information), past the viewport due to the justify property stretch and the flex-wrap property nowrap. As a side note, active-task-bar-information was always 2px shorter than main-wrapper until I did that reset and now they measure the same width in any sized viewport (as far as I'm able to determine).
Hopefully I understood your question properly and gave you appropriate advice.
EDIT: While I was fulfilling a request for a [demo][1], I added inline-flex to all three divs. Details are provided with the demo. Below are screenshots illustrating the 2 divs equal widths.
In this fiddle I've taken #zer00ne's code, and tried to simplify the situation, by keeping only the outer div a flex-box, instead of managing a hierarchy of flex-boxes. I've kept the inner divs in line with display: inline and white-space: nowrap. Is seems to achieve the desired result.