So I've got two components inside my home component and I want one of them (context menu) to render in front of the other (side bar) but they're rendering at the same level, so you can see the side bar through the context menu. What am I doing wrong, or what do I need to change?
<home>
<div *ngIf="contextmenu" class="contextmenudiv">
<context-menu [x]="x" [y]="y"></context-menu>
</div>
<side-bar></side-bar>
</home>
side-bar css:
z-index: 0;
width: 25%;
position: absolute;
right: 1%;
contextmenudiv:
z-index: 11;
display: block;
box-sizing: border-box;
context-menu:
z-index: 11;
box-sizing: border-box;
I've tried adding position: absolute to my context-menu and they still render at the same level. What do I need to do to get the context-menu to render in front of the sidebar?
Immediately after I posted this question, I found a solution.
I literally just needed to add a relatively high z-index to the outermost div inside the context-menu component.
Related
I'm looking to maintain fixed navbar irregardless of sidebar with it appearing under the navbar as in here with attached top/bottom:
http://codepen.io/redshift7/pen/VaKmjq
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo sidebar menu">
Attached segment won't work with fixed navbar where it will stretch through the page. I'd rather see the answer in vue.js.
You need to make following CSS changes for this to work:
.menu {
position: fixed;
top: 0px;
z-index: 10001;
width: 100%;
}
.pusher {
margin-top: 36px;
}
.pushable {
margin-top: 0px !important;
}
Working codepen: here
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I sometimes "protect" a custom UI control by placing a transparent div over the top of it. e.g. I have made an interactive data grid, and when I want to disable it, such as when I bring up a dialogue in front of it, I append a transparent div to the grid's outer container, with height and width stretched, so that it is not possible to click on anything. In the contrived example below, someFunction() will not get called when clicking where 'Blah' is, because the span will be covered by a transparent protector.
HTML:
<div class="control">
<span class="clickable-example" onclick="someFunction()">Blah</span>
<div class="protector"></div>
</div>
CSS:
.control {
position: absolute;
width: 100px;
height: 20px;
}
.clickable-example {
z-index: 0;
}
.protector {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
z-index: 1;
background: transparent;
}
However, I have noticed that in Internet Explorer (even 10), this doesn't work. It seems that a div with background set to transparent (either explicitly with CSS, or implicitly by not setting it at all), the div does not block what is underneath it. I thought this is wrong, but I can't actually see from the spec that it is wrong. The spec simply says that what is underneath will "shine through". It doesn't say whether or not the background should act like a piece of glass.
I've reverted to using a fully transparent image instead of the transparent div, but I wondered whether anyone has any further info on this. (The fact that it works with a transparent image proves that it's not a z-index problem).
I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.
I have some text rotated 270 degrees, which I would like to apply the -moz-box-shadow/box-shadow/-webkit-box-shadow CSS propert to. Unfortunately, the browsers all render the box shadow as if the text block element has not been rotated (i.e the shadow position is 90 degrees away from where it should be as if in standard left-to-right rendering)
Is there a way to overcome this problem?
This works for me. Can you post your code so we can see what you're doing? (For example one thing you could be doing is setting your transform - rotate on a span element but setting your box-shadow on a container div.)
Here is some webkit code that works:
#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
}
</style>
</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>
You are probably applying the box shadow to a parent container (which is not rotated), you must apply it to the container which has the transform, i.e:
http://jsfiddle.net/QK9wG/