I'm working in following GitHub-Repo.
When the window width decreases,the navbar collapses and changes to a dropdown menu with scrollbars (for width and heigth).
How can I remove those scrollbars?
I tried adding
.navbar-collapse{
max-height:auto;
max-widht:auto;
}
to my css file which handles the collapsing size.
Another solution is adding the following to your CSS:
/* No scrolling for collapsed menu */
.navbar-collapse.in {
overflow: hidden;
max-height: none !important;
height: auto !important;
}
Change your css to
.navbar-collapse.in {
overflow: hidden;
}
Demo
Try this
.navbar-collapse {
max-height:100%;
}
Related
I have two divs which are .navbar and .content. .navbar is fixed, and .content overlays .navbar when scrolling.
JSFiddle demo is here. Please make the result panel bigger, so it doesn't show mobile menu.
But when I open dropdown menu, it is hidden under .content. Even if I set higher z-index than .content on dropdown menu, it's not working. Is it just the way it works, or am I missing something? Is there any fix on that without modifying HTML?
UPDATE:
.content div should overlay .navbar div when scrolling exactly like the demo.
just set z-index: 1 for .content and z-index: 2 for .navbar
http://jsfiddle.net/7D77j/1/
CSS :
.content {
z-index: 1;
}
.navbar {
z-index: 2;
}
.navbar z-index is less than your .content z-index thats why dropdown is not coming above the content div
Just use this css:
.navbar{
z-index:3;
}
Demo: http://jsfiddle.net/lotusgodkk/7D77j/2/
then you should remove the .navbar-fixed-top class and the padding on body
http://jsfiddle.net/7D77j/6/
I'm having some problem to get the css work. I do not want the horizontal scrollbar to appear at the panel. Is there a way to make the panel width auto without setting a fixed width? I am using p:selectOneMenu in xhtml.
.ui-selectonemenu {
width: 158px !important;
}
.ui-selectonemenu-panel {
width: 200px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden !important;
}
I had the same problem, fixed it this way.
All block level elements are width:auto by default;
I can't be sure this will work without jsfiddle link, but try this:
overflow: hidden;
overflow-y: scroll;
I've worked around this problem by adding the following rule:
.ui-selectonemenu-list {
margin-right: 1em;
}
The highlighted item might not be completely covered in this case but it's better than scrolling IMO.
Edit
If you never want a horizontal scroll bar then the following fixes the problem nicely for me (highlighting too):
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
padding-right: 1.5em;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden;
}
So I just started using bxslider.
I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?
You can add following css.
.bx-wrapper, .bx-viewport {
height: 200px !important; //provide height of slider
}
Check out this fiddle..bxslider
Why not style the elements?
If you set a fix height for the wrapper you could get in trouble with overflows and positioning.
If you are using lists:
.bx-wrapper ul li { height: 200px; }
You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...
like so:
.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}
i should note that:
bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)
solution:
use media queries to set a different height when viewed in mobile (just a suggestion)
best of luck...
This worked for me, and allows you to keep responsiveness
.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}
I solved centering and fixed size with these lines
.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;
}
I would recommend wrapping it with a div then adjusting the div's CSS. Bxslider I believe inherits the height & width.
.yourDivClass{
height:200px;
width:200px;
}
From here you can adjust the li's accordingly:
.yourDivClass li {
background-color:green; //just to see the overflow if height & width isn't equal
}
Hope this helps.
Update!
http://jsfiddle.net/u62LR/
Just set your image height...
.bx-wrapper, .bx-viewport {
height: [IMAGE HEIGHT] !important;
}
If you don't want use !important just make like this
.bx-wrapper {
height: 400px; //Just choose your height
display: block;
overflow: hidden;
}
Just use the max-height:
.bx-wrapper .bx-viewport{max-height: 657px;}
I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
I'd much appreciate your help, thanks!
Here's my CSS:
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
This works
#mastercontainer { overflow: hidden; }
or the above solution works too.
Remove overflow:auto from div#mastercontainer.
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css.
I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.
{
overflow: hidden;
overscroll-behavior-y: none;
}
Changed to:
{
overflow: scroll;
overscroll-behavior-y: scroll;
}
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow :
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
For instance, another note, from there:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
I have an image container based on Jquery Mobile listview element structure.
Looks like this:
<li>
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a>
<img src="img/products/l/demo2.jpg">
<h3>product2</h3>
</a>
</div>
</div>
</li>
I'm overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.
Here is my CSS so far:
li {
display: inline-block;
min-width: 200px;
max-width: 300px;
width: 24%;
}
li img {
width: 100%;
position: static !important;
max-width: 185px;
max-height: inherit;
}
// fix height and overflow hidden
li a {
height: 100px;
overflow: hidden;
vertical-align: bottom;
}
It doesn't work... If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.
I have tried setting line-height to 100px as well, but this does not work at all.
Any hints on what I'm doing wrong?
Thanks!
EDIT:
Can't use clip either, because I don't know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?
SOLUTION:
It would work like this:
li a {
position:absolute;
bottom: 0;
left: 0;
}
li div.ui-btn-text {
position: relative;
height: 100px;
overflow: hidden;
}
Doesn't use vertical-align but the result is ok.
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/
vertical-align: bottom; won't push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html
To solve your problem i'd go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here's a fiddle with the result: http://jsfiddle.net/uu96D/1/
And the code using jQuery:
$('img').each(function(){
var height = $(this).height();
if (height > 80) {
$(this).css({marginTop: "-" + (height-80)});
}
});