This is my first post on Stack Overflow so thank you in advance for your thoughtfulness and assistance.
I am using flexbox on my site to change the order of my content on mobile. My site uses a sidebar and has some boxes at the bottom which are outside of the main content div.
<div id="content">
<div class="10col">
*content body*
</div>
<div class="2col">
*sidebar*
</div>
<div id="greyboxes">
*grey box content*
</div>
When screen width allows this layout works great with the main content and sidebar side-by-side and the grey boxes below. The sidebar content are CTAs to other pages.
However on mobile I want the CTAs in the sidebar at the end of the page after the grey boxes.
Currently I'm using flexbox to reorder the content and it's working well. However on mobile it's shifting my content out of the body div.
Mobile without Flexbox:
-Body
-Sidebar
-Grey Boxes
Reordered with Flexbox:
-Body
-Grey Boxes
-Sidebar
I've searched Stack Overflow and Google but no one seems to be having a similar problem, and being new to flexbox I'm sure I'm doing something incorrectly.
If you use the inspector's mobile view to view http://dev.collegesurveyservices.com/our-evaluation-process/ you will see the problem.
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
Im trying to make my sidebar content follow the scrolling but stop at the footer. Currently, any content i place goes too far and overlaps the footer.
<div class="row row-no-padding">
<div class="col-lg-8">
Content is here.
</div>
<div class="col-lg-4">
Sidebar content would be here. I want all content here to follow my scrolling
but stop if if i go too far(stop at the footer).
</div>
</div>
Please help me with this. I know this is a minimalist example but i've tried so many combinations at this point that i dont know what the hell to write.
I've tried position:fixed but it makes the content overlap the footer. position:sticky doesnt do anything, or im not using it properly.
I am trying to use Angular UI-Grid . It works well, but it always small with a scroll bar on the y-axis (You can just visit there home page to view the two examples there, the height of the grids there are the basic grid).
In the docs I have seen that "height" can be given, but I do not want the scroll bar at all.
I want the grid to fit the entire container (page) and to scroll the grid using the browsers scroll-bars.
I have looked everywhere (and in the css) and could not find a solution,
can anyone help me with this?
The ui-grid will just take all the space in the div element it is added in.
http://plnkr.co/edit/hcG0ucnCCbIFbVDqewkr?p=preview take a look at the example and try playing with the .grid in the css.
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
Here's my problem. I am using Bootstrap 3. I need an element to remain 'absolute positioned' within a two column layout. My layout works great but on a tablet or mobile the design means that text scrolls underneath the 'absolute fixed element'.
If you resize the browser on a live demo you will see what I mean here: http://www.concise-courses.com/test-yourself/y/a.php
What is the work around to prevent the text scrolling underneath the clock? I was thinking a background image (didnt work) or a fading technique (didnt really work) or just text-overflow for vertical scrolling....
Any ideas? Thanks as ever!
If you want to hide column A when mobile, just add hidden-xs as a class to that column. It will hide the specified column when the screen is smaller than 768px (e.g. Bootstraps' "xs" setting, see Bootstraps' grid system for more information).
An example: JSFiddle
<div class="row">
<div class="hidden-xs col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
How you want it to look when its on mobile? static? or just hiding the text that behind it?
Ok Im working on a site that has a sidebar and a main content section. The site is made using DIV's but the problem Im getting is that the sidebar doesnt stretch vertically with the content div. For example the sidebar has a few links while the content div has alot of stuff I want the sidebar to stretch. Thanks
You can use display:table-cell property for this & remove float from them. Write like this:
#sidebar,#content_box{
display:table-cell;
}
Check this http://jsfiddle.net/MQy4Y/2/
It's works till IE8 & above.