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;
}
Related
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.
Inside of an accordion, I have a grid with 2 columns (really more but for simplicity here) both of variable length (dynamic form creator). In the left column I have some buttons I want to stay on the screen when scrolling down the right column. Is css grid or expansion panels contradicted with sticky? I tried to find overflow being hidden as I read you couldn't do that, but I did not find that. Do you see what I'm missing and why my sticky doesn't stay?
.html
...
<mat-expansion-panel>
<mat-expansion-panel-header>
Header
</mat-expansion-panel-header>
<div class="grid">
<div id="left">
<div class=sticky>
stay on screen
</div>
</div>
<div id="right">
some other really long content
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
...
.css
.sticky {
position: sticky;
top:0;
}
.grid {
display: grid;
grid-template-columns: 2fr 8fr;
}
I ran into a situation where I needed the expanded mat-expansion-panel-header to stick to the top of the page as you scrolled.
#Mateusz Budzisz's answer talked about using overflow: inherit !important on the .mat-expansion-panel, but this would leave the page with a ton of empty space and scrollbars resulting from the overflowed (but height: 0'd) expansion panel body.
I solved this issue by adding this rule:
.mat-expansion-panel {
overflow: inherit !important;
}
.mat-expansion-panel-body {
overflow: hidden; // This rule fixes extra whitespace
}
.mat-expansion-panel-header.mat-expanded {
position: sticky;
top: 0;
z-index: 1000;
}
Now all expanded panel headers stick to the top of the page as they should and there is no empty space when the panels are closed.
I originally tried adding the overflow: hidden; rule to just the .mat-expansion-panel-content, but this made the expand/close animations of the panel behave weird.
<mat-expansion-panel> has overflow: hidden; You can fix position sticky by removing it, like this:
.mat-expansion-panel {
overflow: inherit !important;
}
But it will result in empty space after panel if any panel is collapsed. More about this css issue: https://github.com/w3c/csswg-drafts/issues/865
I have a problem with a simple container div not stretching to min-height:100% in my angular material project.
I have created a codepen here:
Codepen
The problem is that I have varying amounts of content within the content-holding div (in original project ng-view) and therefore need to have a min-height of 100%-footerHeight-headerHeight to fill the full screen and have a sticky footer at the bottom.
Thanks in advance.
EDIT:
Maybe I wasn't clear enough: I want the footer always to be displayed below the content and in case of very few content it should stick to the bottom. So letting the content-holding div fill up using: min-height: calc(100%-footerHeight-headerHeight) of the height is the idea.
EDIT 2:
I got it working for firefox and chrome with the answers I got here. Unfortunately with the new approach I still face the same problem in safari. Here's a new
Codepen.
DEMO
You should use flex
css
body{
display: flex;
flex-direction: column;
height: 100%;
}
in your html, I removed all styling of height and basically arrived with this structure
<body>
<md-toolbar></md-toolbar>
<div flex>your contents here</div>
<footer></footer>
</body>
angular material have a directive attribute flex which makes the applied element to flex-grow: 1 which basically takes up all the remaining space after its siblings height are placed
more info about flex
The way you presented the problem is great, keep it up.
Add this in your style sheet:
#footer {
background-color: black;
color: white;
width: 100%;
position: absolute;
bottom: 0;
}
Footer will stick at the bottom. Help this hope.
You can use js to solve your problem.
var main = document.getElementById('main');
var content = document.getElementById('content');
var footer = document.getElementById('footer');
var remainHeight = main.offsetHeight - content.offsetHeight - footer.offsetHeight;
document.getElementById('footer').style.marginTop = remainHeight + 'px';
The #main in div has height: 100%.
The #content in div has class ng-view.
You can write it in your controller also.
I finally found a solution (works for all browsers including mobile!) which seems absolutely reasonable and simple. I have the following html structure and css:
html:
<div id='nav'></div>
<md-content scroll flex layout='column'>
<div id='content' ng-view flex>
</div>
<div id='footer'>
<footer>Footer</footer>
</div>
</md-content>
css:
* {
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#nav {
z-index: 2;
}
#content {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
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
On this site: http://walkman.pk/aserdus2/tagok.php
I have two background-images on the left and right side, which doesn't appear, and I can't figure it out why ?
Every other page of the website works fine. It seems that some <div> elements are not closed properly. When I watch it with chrome inspector, I see that the content div is very thin, but I don't understand the reason of this.
What should I do to show up the images?
You have only floating elements inside #content, so its height is zero. You can fix this by setting overflow to something other than visible:
#content {
overflow: hidden;
}
Voilà:
That's because both elements with class block are floating and therefore the element with id content has no height (which has the background images). So you need to give height to the content element (height: 250px) should solve the problem.
Add this to your #content {}:
height: 600px; (or however high the images are)
I tried it with Inspect Element and the pictures appeared.
Good luck!
Try
<div id="content">
...
<div style="clear:both"></div>
<!-- CONTENT END -->
</div>
OR
http://www.webtoolkit.info/css-clearfix.html
<div id="content" class="clearfix">
...
<!-- CONTENT END -->
</div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}