I try to put a div 100% on top of the content of the page. The problem comes when the content has some margin. I illustrate here with a simplified case.
If I understand, position fixed: "The element is positioned relative to the browser window". So, why the div .trans is affected by what is behind? How to put the div transparent 100% of the page and on top of content?
Here is a good place to see the problem and try the solutions: http://jsfiddle.net/rdkAW/1/
CSS:
body { margin:0; }
.trans{
position:fixed;
width:100%; height:100%;
margin:0;
opacity:0.7; filter: alpha(opacity = 70);
background-color:red;
z-index:5;
}
#content {
position:relative;
margin:30px auto; /* is this the problem? */
width:95%; max-width:890px; height:1200px;
z-index:1;
background-color:blue;
}
HTML:
<div class="trans"></div>
<div id="content"></div>
The problem is solved if I use. top:0; left:0; It seems that position fixed needs that. I still do not understand very well why. If the fixed div is 100% and by definition fixed position is relative to the window, why is it need to specify top and left? I would appreciate if someone can explain it.
Related
I am using a navigation bar in my Vue/Vuetify app, and added a v-app-bar-title component to display the name of the page the user is currently on. However, when I load certain pages, the title text becomes truncated, and only corrects itself if I reload the page. Here is an example of what I mean, I added a red border to the element to show that the text should have enough room:
If I reload the page, the tile returns to normal:
I tried adding the text-overflow: show property to the element, but this didn't seem to have any effect. I also added a min-width property, but this failed to change the title's behavior.
EDIT: Including a little extra code:
Here's the title component I'm using:
<v-app-bar-title class="title" >{{ title }}</v-app-bar-title>
And here's the CSS for it:
.title {
flex-grow: 10;
color: var(--text-reverse);
text-overflow: show;
// border: 1px solid red;
}
I did find a workaround by just replacing the v-app-bar-title component with a span, but that feels cheap and I'd like to be able to utilize as much of vuetify as possible.
try with this
<v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>
I found a solution that seemed to work in case it is useful:
<style>
.v-app-bar-title__content{
width: 200px !important;
}
</style>
Try this... It worked for me
<v-app-bar-title class="title" >
<div>{{ title }}</div>
</v-app-bar-title>
I had the truncating issue in Safari. Chrome was working fine. I was able to fix by adding class="grow"
<v-app-bar-title class="grow">
{{ title }}
</v-app-bar-title>
I had the same issue and didn't want to use !important. So I've just replaced v-app-bar-title with v-toolbar-title and had no this truncation issue any more :)
Great question. Could you share the code of your app-bar component, so we can have a look?
Update:
Is your v-app-bar-title directly in the v-app-bar?
Possible fix, I have never had to change flex-grow on Vuetify components. Have you tried removing the flex-grow?
Additionally you could try in your css title class:
text-overflow: clip;
overflow: visible;
We can make use of the v-toolbar-title component.
This worked for me!
Example for toolbar title
if you want to add space between v-app-bar-titles then adding margin is the best i got here
<v-app-bar-title style="color:white" class="title">
Title here
</v-app-bar-title>
<v-app-bar-title style="color:white " class="little ml-4">
</v-app-bar-title>
Had the same problem.
Fixed with this
<style>
v-app-bar-title__placeholder {
text-overflow: clip;
}
</style>
If you show the placeholder and hide the content in the v-app-bar-title, it seems to work.
.v-app-bar-title__placeholder {
visibility: visible !important;
}
.v-app-bar-title__content {
visibility: hidden !important;
}
I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.
As others have stated adding a padding-top to body works great.
But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.
This solved these kinds of issues for me
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)
a much more handy solution for your reference, it works perfect in all of my projects:
change your first line from
.navbar.navbar-fixed-top
to
.navbar.navbar-default.navbar-static-top
Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!
The solution for Bootstrap 4, it works perfect in all of my projects:
change your first line from
navbar-fixed-top
to
sticky-top
Bootstrap documentation reference
About time they did this right :D
#Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
This issue is known and there's a workaround in the twitter bootstrap site:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of padding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
This worked for me:
body { padding-top: 40px; }
I put this before the yield container:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.
EDIT - this works much better:
#media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the body padding in the first place? I have been searching for a solution to this problem, and here is what I came up with:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.
I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
For handling wrapping lines in menu-bar, apply an id to the navbar, like this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
and add this small script in the head after including the jquery, like this:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
That way, the top-padding of the body gets automatically adjusted.
use this class inside nav tag
class="navbar navbar-expand-lg navbar-light bg-light sticky-top"
For bootstrap 4
for Bootstrap 3.+ , I'd use following CSS to fix navbar-fixed-top and the anchor jump overlapped issue based on
https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
All you have to do is
#media (min-width: 980px) { body { padding-top: 40px; } }
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
I replaced the require in the "bootstrap_and_overrides.css" to:
=require twitter-bootstrap-static/bootstrap.css.erb
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
#import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
#import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
If the require statement is before the body CSS, it will not take effect.
I would do this:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
This works and looks good for me.
<body class="pt-5 mt-4">....</body>
I just wrapped the navbar in a
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
No fancy hocus pocus but it worked..
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
Update: I have found out that this is a very specific problem with <div>'s with the combination of overflow: hidden and anchors. There seems to be no solid way around it. I now deleted the overflow: hidden. This solves my anchor problem, but creates extra space below my columns. This is not such a big problem, but if anyone knows how to get rid of the overflow without using overflow: hidden, suggestions would be really welcome. End update
I have a fairly simple website with a header in a <div> over two columns. The header and the columns are in one container. The header is NOT fixed; when scrolling down, the header goes out of view.
Now, my problem is with the anchors I want to add in the right column. The anchor itself works properly; when I click on the link on the top of my page, it jumps to <h2> just fine. It puts the title in the top of the screen just like I want it to. The problem is, however, that when I scroll back to the top, the upper part of my content in the columns has shifted behind the header. At first I thought it shifted all the way up to the top of the page, but now I see that that is not the case. I don't understand what the amount of pixels corresponds to. The columns themselves seem to keep the proper length; there is now extra empty space below the text.
I have read several questions of others on this website, but they all dealt with fixed headers, and their problem was that the anchor tag itself disappeared behind the header. I have tried the solutions proposed to this problem, but that causes my anchor tag to appear too low on the page and doesn't solve the problem that the upper part of my columns ends up behind the header.
Does anyone know how to fix this...?
My HTML for the page-setup:
<div id="container">
<div id="header">
</div>
<div id="columns">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
</div>
My CSS for the header and the columns:
#header {
width: 738px ;
height: 298px ;
padding: 0px ;
position: relative;
}
#container {
width: 738px ;
margin-left: auto ;
margin-right: auto ;
margin-top: 0px ;
margin-bottom: 0px ;
padding: 0px ;
}
#columns {
position: absolute;
margin-top: 0px;
margin-bottom: 0px ;
width: 738px ;
background: #b43232 url(fauxcolumns.jpg) ;
overflow: hidden ;
}
#leftcolumn {
float: left;
width: 254px ;
margin-top: 0px ;
padding: 0px ;
}
#rightcolumn {
margin-left: 254px ;
margin-top: 0px ;
padding: 0px ;
}
And, finally, my HTML for the anchor:
Text
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>
So, to summarize: the anchor works, but when I scroll back to the top, the upper part of my content has now shifted behind the header. So I guess I want the content of my columns to align with the top of the column, instead of in some random place behind the header, but I can't imagine how to do it. Setting top or margin-top to either #columns or both columns separately doesn't work. I can't think of anything else...
Anyone have any ideas?