I want my vuetify application content (not the navigation or toolbar) to be scrollable horizontally and vertically to reveal a large grid (much like an iframe or frameset would):
https://cawoodm.github.io/powowshell/ide/
The main grid is rather large (9x9 200px squares + padding) and the requirements are:
The content area (yellow) should use all the remaining width and height of the screen (max-height: 100% not working like I think it should)
The user should be able to scroll that (yellow) content area (see pink scrollbars) to reveal the entire grid
The problem is I only get a vertical scrollbar along the entire height of my window (which I don't want) and, when I scroll that to the bottom I get my horizontal scrollbar (albeit grayed out).
I've hacked together a codepen which kind of shows the problem but ultimately I'd like the corrections required to the URL demo linked above.
HTML
<v-content >
<v-layout fill-height fill-width>
<div id="scroll">
<div id="grid">81 200x200px blocks go here...
</div>
</div>
</v-layout>
</v-content>
CSS
#scroll {
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
overflow: scroll;
background-color: yellow;
padding: 10px;
}
#grid {
width: 2000px;
height: 2000px;
background-color: grey;
}
Related
I am trying to use the ng-pdf-viewer library to embed a component with a PDF into a web-page (angular). I have a container div, that I want to be the parent of the pdf viewer. It's dimensions are not fixed (it's not a fixed pixel value, the size of the container depends on the size of the screen / other elements - it fills the space).
My goal is to have the pdf viewer be exactly the size of the container and have a scroll for long pdfs within that container (the bordered-content div, blue in the screenshots).
Here is my code:
<div class="bordered-content flex-fill" style="background-color: blue">
<div class="pdf-viewer-wrapper">
<pdf-viewer [src]="'pdf-link'"
fit-to-page="true">
</pdf-viewer>
</div>
</div>
</div>
and the css:
.bordered-content {
width: 100%;
border: 1px solid $light-color;
border-radius: 10px;
padding: 20px;
}
.pdf-viewer-wrapper {
height: 100%;
overflow-y: scroll;
background-color: red;
}
However, with this setup, the pdf-viewer wrapper doesn't seem to obey the height: 100% rule and just never shows the scroll - instead it overflows the container for as many pages as there are in the pdf.
If I change the pdf-viewer-wrapper class to :
.pdf-viewer-wrapper {
height: 600px;
overflow-y: scroll;
background-color: red;
}
it suddenly starts listening to the height rule and the scroll is there. The pdf-viewer however is limited to 600px , not to the height of the parent which is not ideal.
Can you please explain to me why it's working for a fixed number of pixels for height and not for 100% ? And how to fix it?
Let's say you have a page which you don't want to scroll, constisting of three parts; a header, a main part and a footer:
<body>
<div id="page-content">
<header>My Header</header>
<main>Main Content</main>
<div class="footer-pusher"></div>
</div>
<footer>My Header</footer>
</body>
The page shall always be 100% high, the header and the footer have a fix height and 100% width, and the middle part shall stretch to fill the rest of the page, having a min-width in case of simply to small screens in terms of height. Only in that case, the page shall be scrollable. To achieve this, I used the following CSS, including the one to have a sticky footer:
body, #page-content {
height: 100%;
display: flex;
flex-direction: column;
}
.footer-pusher {
height: 200px;
margin-bottom: -200px;
}
footer {
height: 200px;
}
header {
height: 125px;
}
main {
flex-grow: 1;
min-height: 210px;
}
My question now is, how can I code via CSS that the main part expands to the remaining height of the page, and is at least 210px high? For illustrative purposes, I wrote the flex-grow property, as that's precisely the one I need, but in vertical and not in horizontal direction of the flexbox container. With the code above, the middle part is always 210px high..
I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.
I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}
with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}
The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.
I've got a basic website with very long mostly-text content:
HTML goes simplified like this:
<body>
<div class="content" id="01">
<p>LONG TEXT</p>
</div>
<div class="content" id="02">
<p>LONG TEXT</p>
</div>
</body>
Same goes on with about 40 more id's.
CSS looks for these parts like this:
.content {
max-width: 600px;
min-width: 240px;
margin: 0 auto;
}
So the content divs are scaled down with browser window / viewport. This finally takes us to my problem:
Whenever I scale the width of my browser window down, the width of the content div also scales down and so the content itself gets longer, or taller should i say. This leads to situation where current point of focus in content moves down. Especially bad this is when switching mobile device from landscape to portrait orientation or vice versa.
I'm now trying to find solution that scales the height of content both up and down, keeping the current vertical focus point on the screen. Does anyone have any ideas how this could be done in HTML, CSS or JS? Content divs have unique ids, single div not being very long so I guess that at least with JS this should be possible by somehow tracking the currently displayed id?
I hope I got some sense to this, while english not being my native language.
Thanks.
I think what you should do is set the <p> width fixed to the min-width of div.content, so it will never change it's width, but the parent <div> will, according to the current orientation.
You can see an example here: http://jsfiddle.net/dyjXC/1/
CSS:
body{ width: 300px; } /* portrait or landscape */
div.content
{
max-width: 600px;
min-width: 240px;
background: salmon;
border-bottom: 1px solid green;
}
div.content > p
{
text-align: center; /* I centered both the text and... */
margin: 0px auto; /* ... the p itself, but you can use default to left */
width: 240px;
background: lightgray;
}
I hope it works as expected.
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.