I have a styled component modal that has several divs as childs. I need to style the div in the second level.
<StyledComponentModal>
<div>
<div> // <-- This one needs styling
// ...
</div>
</div>
</StyledComponentModal
How can I select that div?
I tried using div div:
const Modal = styled(MyModal)`
background: transparent;
height: auto;
margin: ${rem(0)} auto;
margin-top: 25vh;
width: 90vw;
div div {
/* doesn't work :( */
}
`;
I also tried other stuff like &div div etc. but can't get it to work.
How do I select and style that div?
I figured it out:
> div > div {
}
works.
Related
I am currently building a todo app, and from react, I am using CSS to custom my todo items' margin!
The problem is, I only needed the first element to have a margin-top of 110px. Here's what it'll look like when I apply it to every item - link
It's that the todolist items are too separated!
But if I removed the margin of 110px, the item is behind the textbox!
link
Is there a way to change the property of first item? I can delete the margin-top: 110px from the css file, and change the 1st item using JS. My planned function -
function addTodo() {
setList([...list, value]);
const firstItem = list.findIndex(0);
}
Thanks!
:first-of-type selector in CSS allows you to target the first occurence of an element within its container. Also, another option might be to select first child of the element, you can use :first-child pseudo-class.
There are several possibilities to solve this problem. I think the simplest one is to just build a container that contains all list items, and set it's padding-top or margin-top to 110px. The result could look like this:
.frame {
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
border: 1px solid #000;
text-align: center;
}
.control-button {
position: absolute;
}
/* this is the container that holds all your items */
.items-container {
margin-top: 40px; /* in your case, it should be 110px */
}
.item {
margin-top: 10px;
border: 1px solid #000;
}
<html>
<body>
<div class="frame">
<div class="control-button">
<u>add item</u>
</div>
<!-- this is the important part, the container with the items -->
<div class="items-container">
<div class="item">
This is an item.
</div>
<div class="item">
This is another item.
</div>
</div>
</div>
</body>
</html>
I think this solution is the most simple and flexible one. You can easily add left, right or bottom margins too and you don't have to worry about which items it affects.
The simplest solution you can go with is using the :nth-child(n) pseudo class in CSS or :first-of-type.
Try this code:
.item:nth-child(1) {
margin-top: 110px;
}
Currently trying to align my website logo, menu, and contact us button. (http://bathpluskitchen.com/)
I've tried numerous CSS adjustments but just cant seem to get it right. Any ideas?
Put all of these elements in a container div.
<div class="middle-align">
<!-- your elements here -->
</div>
Then use the following styles:
1- Line height method:
.middle-align {
height: 200px; /* 200px is an example height */
line-height: 200px; /* again, an example height */
}
2- Table styling method:
.middle-align {
display: table;
}
and create containers for all child elements
<div class="middle-align-child"><!-- child element here --></div>
.middle-align-child {
display: table-cell;
vertical-align: middle;
}
I'm having issues with the z-index of a bootstrap dropdown.
http://jonwhittlestone.com/public/z.html
In this page, the pass button's associated dropdown is appearing on a lower layer that the container and appears to constrain it.
Editing the following doesn't seem to fix.
Any ideas CSS people?
Thanks
Jon.
The reason your dropdown isn't being shown is that this element has the CSS option of overflow:hidden:
<div class="panel panel-default">
Edit bootstrap-alizarin.css line 4100 and remove overflow:hidden.
After you have done this, insert the following code after the closing tag of the .sanctions-result-actions div:
<div style="clear:both;"></div>
it is overflow:hidden issue make this changes of the .panel
overflow:hidden will not allow its children to show if are coming out
.panel-group .panel {
background: #fbfbfb;
margin-bottom: 0;
border-radius: 5px;
/* overflow: hidden; */ /* remove this */
float: left; /* and add this */
width: 100%; /* and add this */
}
There is other css style (bootstrap-alizarin.css:4100), you have to change it:
.panel-group .panel {
/*...*/
overflow: hidden; /* to remove */
}
The rule overflow: hidden on the container is the problem
override it to overflow: visible
I can see that a parent div with class="panel panel-default" has an overflow: hidden.
If you want to display the inner div out of it's parent overflow-hidden div, you must place this div out of the current one.
Check this post: post
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
I am working on joomla template, and i make a custom button inside module, but the button css is override by module css. how can i fix this. help would be appreciated.
This is css i want for the button:
.button-middle {
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
color: #FFFFFF;
float: left;
height: 27px;
line-height: 27px;
}
The code below has override button background :(
div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
background: none repeat scroll 0 0 transparent;
margin: 0;
overflow: hidden;
padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
padding: 0;
}
Add !important at the end of the background:
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;
Does the <link> declaration for your custom CSS file (if you're using one) come after Joomla's included CSS files within your <head> section? If you're not using a custom CSS file, do consider it - it means you can completely skirt similar issues by having your own selectors "trump" Joomla's by the simple virtue of having your CSS load last (thereby taking higher priority).
<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />
(Omit the / from the closing brackets for HTML 5.)
If you've had this issue once, believe me that you'll have it again. (And again...)
If you have control over the markup you might be able to get away with adding an id attribute and then making your background selector #someid. As far as I can tell there were only class and element selectors, a single id selector might trump them all.
Disclaimer: im on the train and I can't test it right now. This could be totally incorrect. I also don't have the CSS specificity spec up to check either.
Edit:
Consider the following markup:
<div id="info" class="module">
<div>
<div>
<div>
<div>
<div>
<div>
<div class="test">
data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And then the following css:
.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */
The word "data" will have a background color of green.
Even if you can't easily change the markup to add an id, try to find an id any where in the parental chain or you could write your selector as div.module .button-middle { ... }, which still classifies as a 0,2,1. As long as your style is more specific than the one you are trying to override, it will trump.
fiddle here.
And a couple of links on specificity: here and here.