I am using ngDialog for my popup windows. I can make it as wide as my whole screen but not as tall. Here is a style I am using:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content {
width: 95%;
height: 100%;
padding-top: 5px;
overflow: auto;
}
</style>
height: 100%; does not even near give a maximum height.
Somewhere in the code then after a dialog is opened I can say something like this:
$dialog.dialog.find('.ngdialog-content').css('height', $window.innerHeight);
That will make the the popup window as tall as the whole screen, bu the screen itself will become scrollable, even though the popup does not exceed the screen.
As you can see, there is a vertical scroll bar on the right side.
Can this scroll issue be fixed?
Thanks
You can use CSS to hide scroll bars:
overflow-y: hidden;
overflow-x: hidden;
Related
I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:
Navbar CSS:
position: fixed;
width: 100%;
top: 0;
Command Line:
margin-bottom: 60px;
Body Text:
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;
I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.
I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.
You can limit the height of the container in which the text is to a specific height and then set the overflow on the y axis to scroll, this will result in the behavior you want because the scroll is limited to the container div, thus the text won't scroll through the navbar.
Remember to adjust the margin from the top accordingly so it starts under your nav and command bar.
Example (assuming your navbar is 10vh):
#text-container {
height: 90vh;
margin-top: 10vh;
overflow-y: scroll;
}
If your navbar is for example 100px you could do:
height: calc(100vh-100px);
margin-top: 100px;
This would correct the height so it will always fill your whole screen.
If a horizontal scrollbar appears you can hide this with overflow-x: visible; or overflow-x: hidden;depending on the behavior you want
To start with an offset on the body text just give it a margin-top which is the same height as you nav bar, i.e.
margin-top: 50px;
This will give your body an initial spacing before it starts, after the user starts scrolling it'll
.full_width {
position: relative !important;
z-index: 5000;
}
I have a base panel called BasePanel whose code cannot be changed.
I have a bar which is always a fixed height and this bar is NOT added in the BasePanel, but it is overlapped with the BasePanel .
I also have a panel called Container which is added to the BasePanel. Panel Container should be just under the Bar.
Now I want when the window size is changed, the Panel Container can automatically appear scroll bar, which I have already implemented but has a problem. The problem is when I window gets small the part of the scroll bar will be covered. I would like to know how I can solve this problem?
BasePanel {
width: 100%;
height: 100%;
position:fixed;
font-family: 'Arimo';
}
Bar{
height: 41px;
width: 100%;
z-index: 9998;
position: fixed;
top: 0px;
}
.Container{
width: 100%;
height: 95.570321151%;
top: 4.429678848%;
overflow: auto;
}
If I set container's top as percentage, the up arrow of the scroll bar will be covered by the Bar.
.Container{
width: 100%;
height: 95.570321151%;
top: 41px;
overflow: auto;
}
If I set container's top as 41px, the down arrow of the scroll bar will be covered because there is no enough space for it.
In other words, I would like to know how I can make the Panel Container always start from top 41px and no matter how the window size is changed, the Container won't get overflowed from the BasePanel so that the scroll bar will not be covered(Remember the Bar is not in the BasePanel)?
I figure out how to do it.
Just use calc() function to set the Container Panel height.
Such as calc(100% - 41px)
:)
Is there a way to have content hidden in the way that overflow: hidden; does without hiding the scroll bars? I'm trying to make a site with a video background, and to make the video still fit on the screen properly on differently sized screens or screens with different aspect ratios, I need to hide some of the video off the screen at some times. I've been doing that like so:
.video-background {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 0;
}
However, I noticed that this method hides the browser scroll bars, creating a space on the right side of the browser window which only displays video that would be "under" the scroll bar (hidden off of the page by overflow: hidden;), but the rest of the site does not extend to that extra space. It is still possible to scroll using the mouse wheel, but the bar does not appear.
Instead of position:absolute try position:fixed
Why dont you try
overflow : scroll;
or
overflow : visible;
Source : http://www.w3schools.com/cssref/pr_pos_overflow.asp
kineticjs generates a div container to wrap a stage canvas. But it sets this div's display attribute as display:inline-block.
I would like the canvas is displayed in full screen without scroll bar in browser. But with display: inline-block, there are always scroll bar displayed.
If I can set display as auto, the scroll bar will disappear.
Is there any way to set the css style for the div generated by kineticjs?
Thanks in advance!
I had the same issue a few weeks ago. I also didn't want the scrollbars to be visible, because my canvas is always scaling to full-screen. I worked this out by setting the complete html/body to overflow:hidden;
Complete CSS of my html, body:
html, body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
To set the div at full-screen you simply have to set its width and height to 100%:
#container{
width: 100%;
height: 100%;
}
And last but not least, set the width and height of your stage to:
width: window.innerWidth,
height: window.innerHeight
I hope this could somehow resolve your problem :)
I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */