I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
Related
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
On my site, http://www.granthpark.me/outside If I resize my browser to smaller sizes, my content will be hidden and I can't scroll to it. Can anyone point out what's making the content fixed?
Here is the CSS, can't post it here because it's too long http://www.granthpark.me/assets/css/main.css
EDIT: New problem. I can scroll now because I tried replacing every instance of position:fixed with absolute in addition to changing overflow:hidden to scroll. But now I don't know how to fix the margin of my background to resize properly when I resize the browser.
Simple replace the style sheet, you will get rid of all the problems. click to see
add property in body tag this in css:
body{overflow: scroll;}
Change your body's property to overflow: scroll;
Right now your overflow property is set to hidden.
body {
background: #fff;
overflow: hidden;
}
Here's the culprit:
body {
background: #fff;
overflow: hidden;
}
add this property in body tag:
overflow-x:hidden;
In css file "main.css" line no. 934 add this property in id #bg
Position:Fixed
I am new to css, i created a webpage using css and it looks perfectly as expected when browser is maximized. But when i retrying the web page, the div elements i used in the page overlap each other making the perfect mess of things...!
I tried wrapping the div element.
#wrapper
{
min-width:500px;
overflow-x:scroll;
}
and also tried to set minimum-width attribute to parent div. Nothing worked out...
Please Help.
Try
#wrapper
{
min-width: 500px;
overflow-x: scroll;
position: relative;
}
My page seems to be centered in all modern browsers except IE7. In CSS I have simply:
html, body {
width: 1000px;
margin: auto auto;
}
and it doesn't work.
Another issue for all browsers is that whole page slightly moves after clicking menu items. E.g. choosing second menu item causes thah page is shifted to the right compared to third page. Could you help me how to solve these problems. TIA
To fix the first issue, remove html from the selector:
body {
width: 1000px;
margin: auto auto;
}
The second issue is caused by there not always being a vertical scrollbar, which changes the width of the page and so causes a slight horizontal shift.
Fix it by adding this, which forces there to always be a vertical scrollbar:
html {
overflow-y: scroll
}