I have the following "layout.cshtml" file in an MVC 5 project:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body style="background-image: url('/Content/images/background.png')">
<div id="master" style="padding: 20px; width: 100%; position: fixed; height: 75px; z-index: 9999;">
bunch of stuff removed for clarity
</div>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
The "master" div contains a toolbar that is populated via JS and positioned at the top of the page, where it remains on top of everything and ignores scrolling of the page so that it's always visible. That part seems to work fine.
The problem is that the rest of my page (that which is filled in via the #RenderBody() call) will scroll underneath the toolbar. I would like to keep the top of that section from going any higher than the bottom of the toolbar. I tried putting the #RenderBody() within its own div, and trying various "positions" (fixed, relative, absolute). I even tried a div around that div, with various combinations of "positions" for both. I either get a body that won't scroll at all, or one that scrolls underneath the toolbar.
Is there any way to do what I'm looking to do?
Thanks,
Andrew
Because the div with id='master' has the position style set to fixed, it will be displayed in a fixed position relative to the browser window. In order to move the content that it displayed "below" it, you should set
style="margin-top:75px"
to the element/container that follows this div. This will push it down from behind the master div so that it is not overlapped.
Example:
<div style="margin-top:75px">
#RenderBody()
#RenderSection("scripts", required: false)
</div>
SECOND OPTION: You may also want to consider setting
position:relative
instead of
position:absolute
UPDATE (see comment below):
Try setting the position of the sub-header (script section) div to fixed, just like the main header section, then set the 'top' property to 75px. This will lock it to the base of the main header:
<div style="position:fixed; top:75px;">
#RenderBody()
#RenderSection("scripts", required: false)
</div>
UPDATE 2:
Set this style on both the header and the body. First this will hide content that would normally be visible behind the header buttons. Second, this will lock the backgrounds of both containers together so scrolling won't cause a seam to appear between them. This gives the effect of the central content disappearing when it reaches the lower edge of the header.
background: url("/Content/images/background.png") repeat fixed 0% 0% transparent;
Related
I am using Element's Notification component but when it is activated the dialog appears but seems to be "behind" the grey background that is also introduced. Clicking anywhere removes the grey background and allows the interaction with the dialog box but without the greyed out background that should be filtering out the noise of the normal screen. Here is a short video that shows the various states:
video
The code to put the component in as follows:
<div class="add-address" #click="showAddDialog = true">
+
</div>
</div>
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed">
<span>Postal Address</span>
<el-input v-model="newAddress" type="text"></el-input>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" #click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
I have used the inspector to poke around at the CSS but I haven't yet understood what's causing this from a CSS perspective nor a Vue/Element perspective. Any help would be appreciated.
I have further analyzed the HTML/CSS and the component appears to introduce two separate blocks in the DOM:
The lower block is the grey background which you'd expect to "blur" the page and focus attention on the modal. It, however, is in front of the dialog. Also of interest is that clicking anywhere seems to target the grey background and dismiss it but in so doing it also has a subtle effect on the placement on the dialog box as can be seen here:
Note that the z-index of the dialog box is greater than the background which intuitively makes sense to me but I'd have thought this would have put the dialog box on top. Guess that's not all there is to this.
I have hacked a work-around for now by changing the background to display: none and then adding the following HTML directly before the modal dialog in the DOM:
<div class="modal-background" v-if="showAddDialog"></div>
These seems to validate my underlying suspicion that placement within the DOM tree is important and the component's attempt to place the modal background at the very end of the DOM is somehow problematic.
I had the same issue and also found changing the z-index of the dialog had no effect. This was occurring when I had nested Element.Eleme.io elements, which appears to be the case for you also.
The z-index is not quite as simple as "higher always means on top". Elements are grouped into different stacking contexts; it is not possible for an element in a lower stacking context to appear above an element in a higher stacking context. Therefore depending on where the different elements were rendered in the DOM, they can land themselves in different stacking contexts, and are destined to remain at the same relation to one another, no matter how much the z-index has changed. (See https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for a more detailed explanation on the z-index).
Examining with Chrome dev tools, I found that the obscuring modal is not rendered in the same place as the dialog; in fact it is appended to the body, i.e. on the outer reaches of the application, which appears to be the reason they are not within the same stacking context. There is a quick fix; the dialog element has a property "modalAppendToBody". If true, the modal is rendered to the body, and if false it is rendered to the parent element of the dialog. By specifying this as false I managed to solve the issue:
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed
:modalAppendToBody="false">
</el-dialog>
you can use the CSS property called z-index
either any object which you want to set to back ? you just have to set z-index: -1; // or more
or you want to set any object on to the front of another ? you just have to set z-index: 1; //or more
Check the Snipet For More Info :
.a {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.b {
margin-top:150px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> I am on Image</h1>
<img class="a" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
<br>
<br>
<br>
<br>
<h1> Image is on me</h1>
<img class="b" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
</body>
</html>
I'm using angular material to create a page with a fixed toolbar on the top and a md-content next to the toolbar. However I can't make the toolbar sticky. I've read the documentation for many times, it should be simply like:
<body layout="column">
<md-toolbar>
...
</md-toolbar>
<md-content>
...
</md-content>
</body>
and md-content should be set as overflow: auto already. But just like the first example in the documentation, even I set overflow to scroll. It still doesn't work.
Please see the codepen
Set your height on the element that needs to be scrolled or else it won't know what portion needs to scroll.
<md-content flex="" layout-padding="" style="overflow: auto; height: 200px;">
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
In my html the content should be centered on screen and his width should never be greater then 950px.
Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.
The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.
When I open on a browser the css has this media query:
#media (min-width: 1200px)
that makes my div always fit the entire screen.
How can I fix this?
Basically what I want to do is something like this:
The orange line is the container (or body) and the blues are the rows
Thanks for any help.
EDIT
Just something I found that maybe help someone to help me
If I comment out this line:
#import "twitter/bootstrap/responsive";
my div.content keeps the 950px width but my html loses its responsive behavior, which I don't want
EDIT 2
The html markup:
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>
but on the browser it creates this things:
body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px
Just to clarify, this is not a problem on twitter bootstrap, this is a problem on twitter-bootstrap-rails
The way I found to fix it on development is open the twitter-bootstrap-rails gem with gem-open and change the file: /vendor/toolkit/twitter/bootstrap/responsive.less commenting out these lines:
// LARGE DESKTOP & UP
// ------------------
#media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
You could use the wrapper this will give you a default size of 940px.
<body>
<div class="container">
...
</div>
</body>
But if you are looking to a custom width, you should add some css in your application.css like this:
body .container{
width:980px;
}
Check it out here: Bootstrap - Layout
A nice tutorial for layout: Filling layout with bootstrap
Be sure to wrap your layout with <div class="container">, which will create a fixed layout that is centered. If this doesn't work, then perhaps something else is wrong with your layout. Please update your question with your layout HTML if this is the case.
Documentation: http://twitter.github.com/bootstrap/scaffolding.html#layouts
At the start of your responsive media queries (before ANY of them), set your element to have a "max-width"
body{max-width:1200px;margin:0px auto;}
Your site will still be responsive when you decrease browser width, but if you open up larger than 1200px (many decent widescreen displays) then it will stay as a 1200px container.
To keep it centred as it goes over 1200px add the following to the same container
body{max-width:1200px;margin:0px auto;}
The above adds "auto" margin to the left and right hand side of the element, which means means it becomes centred... (the 0px just means top and bottom are no margin, you could add some if you wanted/needed.
Note you don't have to add all that to body, but it just means it gets it out of the way at a high level....
Apparently it was a bug in the version of twitter-bootstrap gem i was using.
I dropped that project so i cant test in that environment anymore, and in some new project that i tried twitter-bootstrap again and didn't see this error again.
So i guess it is closed.
thanks for everyone
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/