Let's say I have this layout:
<div id="parent">
<p class="content">Hello World!</p>
</div>
I want to change the color of .content depending on weather the #parent background color is white or black. If it's white, then set the text color for .content to black and vice versa.
Related
Is there a way to automatically keep in sync rows height of table-alike structure between headers and body? I mean to force CSS Grid to keep each header and data row to have equal height, despite them having separate parents? I don't want headers and body to share the same column in HTML. I want two main columns: headers and body.
Additionally, number of rows as well as body columns is dynamic. The goal is to create comparison table, where headers represent product features names and body columns represent product features values. Also, table body will additionally be wrapped in <div> to introduce a slider feature.
AFAIK CSS Subgrid theoretically would do that, but it's experimental in Firefox only
Below is simplified input code available also on CodePen. I want "Header 1", "Data 1.1", "Data 2.1" cells to have same height. Same for higher rows, like "Header 2 | higher header 2 | yet higher header 2", "Data 1.2", "Data 2.2" - all cells should have same height.
.table {
display: grid;
grid-template-columns: 1fr 2fr;
}
.table__headers,
.table__body {
border: 1px solid black;
}
.table__body {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
.cell {
border: 1px solid red;
}
<div class="table">
<div class="table__headers">
<div class="cell">Header 1</div>
<div class="cell">
Header 2
<br>
higher header 2
<br>
yet higher header 2
</div>
<div class="cell">
Header 3
<br>
higher header 3
</div>
<div class="cell">Header 4</div>
</div>
<div class="table__body">
<div class="table__body-inside">
<div class="cell">Data 1.1</div>
<div class="cell">Data 1.2</div>
<div class="cell">Data 1.3</div>
<div class="cell">Data 1.4</div>
</div>
<div class="table__body-inside">
<div class="cell">Data 2.1</div>
<div class="cell">Data 2.2</div>
<div class="cell">Data 2.3</div>
<div class="cell">Data 2.4</div>
</div>
</divc>
</div>
In a concise way: the highest cell in the visual row (because headers and body are technically in separate columns not being same row in the HTML) should dictate the height for the whole row.
Below i attach ugly Paint made picture presenting what i want to achieve:
I made a workaround by manually setting each row's header height (via inline style) to be equal to neighbor row's data height with the help of ResizeObserver (so these heights are dynamically set up when viewport width is changed). To make it work i had to switch from Grid to Flexbox for the headers and data columns, because changing height for Grid children don't make them "take" (or move into) remaining vertical space (they behave like being glued to tracks they are bound to), which happens in Flexbox.
I am aware this is not the best solution, but i haven't came up with anything that worked better.
When vue-js-modal is set to modal Open, the DOM shown below is inserted.
<div class='modal'>
<div class='vm--overlay'></div>
<div class='modal-content'></div>
</div>
Since the header exists on the screen where the modal is inserted,
I want to implement it so that it does not cover the header.
Or No need for it(vm--overlay).
The structure of the DOM is as follows.
<header></header>
<div class='modal'>
<div class='vm--overlay'></div>
<div class='modal-content'></div>
</div>
I was able to apply styles to modal-content,
just like that below
.modal-content {
// same value as header height
margin-top: 50px;
}
But I couldn't apply the style against vm--overlay.
The following didn't work.
.vm--overlay {
// same value as header height
margin-top: 50px;
}
Is there way to remove the vm--overlay or apply the style?
it is a link of properties of vue-js-modal.
https://euvl.github.io/vue-js-modal/Properties.html#properties-2
I am using BorderContainer for layout with center and bottom regions. I can set the minSize of bottom but I am not able to set a minimum size for the center region. Here is my jsfiddle: http://jsfiddle.net/53a69ej7/
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"
id="borderContainer"
style="width: 300px; height: 300px;">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="splitter:true, region:'center', minSize:100"
style=" background: #990;">Hi, I'm center pane
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="splitter:true, region:'bottom', minSize:100"
style="background: #099;height:50%">Hi, I'm bottom pane
</div>
</div>
How can I set the minimum height of the center pane to be 100px so that when I drag the splitter up it does not go all the way up. Note that if you drag the splitter down, the height of the bottom region does not go below the specified minSize as expected.
I want to remove this line see below image. I think it's border color but i did try to change color of border but still issue exist.
See this Link for customization of bootstrap navbar
Yeah, you really should include some code.
A typical bootstrap navbar gets the border from .navbar-default
So try the css below:
.navbar-default {
border-color: transparent;}
There are two types of bootstrap menus - default or inverse (light or dark):
<nav class="navbar navbar-default" role="navigation"></nav>
<nav class="navbar navbar-inverse" role="navigation"></nav>
According to your use, do something like this:
.navbar-default {border:none !Important;} or
.navbar-inverse {border:none !important;}
I have a WinJS.UI.Flyout that I would like to have expand upward when content is added to it while it is visible. The flyout's anchor is at the bottom of the screen. If I call flyout.show(anchor, 'top'); it appears correctly at first, but then expands off the bottom of the screen when content is added. If I call flyout.show(anchor, 'bottom'); it expands upward, but it also covers over the anchor element, which I do not want.
This can be done by using -ms-flexbox display for the flyout and packing its content to the end.
flyout background can be set to transparent; it's size can be set to max possible; this way it serves as a outer container which aligns its content to the end. expandable content is placed inside another div flyout-content with background as white.
<div data-win-control="WinJS.UI.Flyout" id="flyout">
<div class="flyout-content">
expandable content here
expandable content here
expandable content here
expandable content here
</div>
</div>
css:
#flyout
{
background-color: transparent;
border: 0;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
height: 400px;
}
.flyout-content
{
padding: 20px;
background-color: white;
}