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
Related
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
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 have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.
here is my html
<div class="slider-wrapper">
<div class="slider">
<div class="portfolio-overlay">
<div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
<div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
<div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
<div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
<div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
<div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>
</div>
</div>
and this is my css
.slider-wrapper {
padding: 25px 0 0;
}
.portfolio-single {
float: left;
width: 70%;
}
DEMO WITH ANIMATION
DEMO
.slider-wrapper {
overflow:hidden; /* to remove page scrollbars */
padding: 25px 0 0;
white-space:nowrap;
font-size:0; /* to remove ~4px whitespace */
}
.portfolio-single {
/*reset fontsize if needed*/
display:inline-block;
width:70%;
}
.portfolio-single img{
vertical-align:top;
width:100%;
}
Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.
As said above we than need to respectively set the slides to inline-block.
using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.
to remove it use on the parent element font-size:0;
If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.
vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.
It's because you gave each image a width of 70%. So each image was taking up a new line.
If you have 5 images, then the max width to have them all on the same line would be 20%. But with any padding/border/margin will add to that, so you might need to put under 20%.
http://jsfiddle.net/rNa9v/1/
.portfolio-single {
float: left;
width: 10%; /* changed to 10% instead of 70% */
}
Your img are in divs so they each take the full width of the page.
You can change this behavior by making the divs "inline":
.portfolio-single {display: inline-block;}
http://jsfiddle.net/9377D/2/
.portfolio-single {
float: left;
width: 16%; /* 100/6 */
}
You can calculate it ;-)
Here you can change the div option.It could solve the problem.
for further assistance follow the link.. : http://www.w3schools.com/css/css_align.asp
I'm trying to get a fixed width white <div> on a gray background (body), but everything is shown gray; the white is ignored. Code is on jsbin. Any ideas? I did this on previous websites, and there everything was peachy. I can't see any difference with what I'm doing here.
PS: I had to write the jsbin URL down, and manually type it here, since Firefox refused to copy it from the share popup to the clipboard. This also worked previously :-(
Your containers and sidebars are left floated, but they arent "cleared".
What you do is add a div
<div class="clearBoth"></div>
after your sidebar div.
and then in your css:
.clearBoth {
clear:both;
}
The floats are ruining it.
It is caused by the floats :-)
Basically #container don't have dimension because everything inside it are floated. No dimension = no background to appear
Adding overflow: auto to #container is one way to solve the problem (depends on how you exactly want the whole layout to appear).
body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}
#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }
try these changes
Your problem is that by spec, contained DIV's are taken out of the flow of the document. Because of this, your container div is considered empty by compliant browsers.
Place the following code at the bottom of your stylesheet:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Then make the change to your container like so:
<div id="container" class="clearfix">
I have some paragraphs inside a div and some of the words are wrapped in anchor tags.
The paragraphs use white-space: nowrap, which causes them to overflow out of the div's boundaries (which is what I intend to do). Problem is, the overflow is visible but anchors are not clickable.
This is probably by design, but still, does anyone know of a way to make the overflowing anchors clickable?
Thanks in advance!
It's because of your div#rightBox - it contains another div inside of it, which is like this: <div class="verticalPlaceholder"></div>. To fix this, instead of using a vertical placeholder like this, change the HTML and CSS like so:
HTML
<div class="rightBox" id="rightBox">
<div class="facebookLike" id="like">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:100px; height:20px;" src="http://www.facebook.com/plugins/like.php?app_id=174634935928464&href=http%3A%2F%2Fgreat-passage.com%2F%3FphotoId%3D113&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=dark&font=arial&height=20"></iframe>
</div>
<!-- Deleted verticalPlaceholder div -->
</div>
CSS
div.facebookLike {
bottom: 75px; /* ADDED */
display: block;
margin: 6px 0 0;
opacity: 0.5;
position: relative; /* ADDED */
}