I'm trying to create Multiple slideable side-panels, hidden outside right side of the screen.
Here the prototype (in which I transated them "almost" outside the right side for better understanding behaviour).
Relevat part of code is:
.container {
display:flex;
flex-direction:column;
position:absolute;
top:0;
right:0;
width:200px;
height:100%;
transform:translateX(150px); /*Should be 170px to place outside view*/
}
.side-panel {
display:flex;
}
.side-panel.open {
transform:translateX(-170px);
}
.content {
position:absolute;
top:0;
right:0;
width:calc(100% - 34px);
height:100%;
}
As you can see, there 3 side.panels, each one openable clicking on its yellow label (indicated ad 1, 2, 3). In semi-hidden area, you can see also contents of each pane, overlapped.
The goal should be that .toggle labels should be stacked like in the example, but theirs contents should fill the entire height of the container (is possible to see that when panels are closed to the right that contents in this situation are effectively overlapped thanks to their position:absolute, but when you open one of them, it will be limited to its direct flex container) in the same way you can see when they are closed.
Please, how to solve?
Hope this is what you are looking for refer below link. Thanks
added height to .side-panel.open
https://jsfiddle.net/wyn7b8rx/1/88
Related
I am using vis.js and would like to align the buttons displayed when using the "navigationButtons" option to the top of the canvas.
I understand this is done using CSS, I was wondering if anyone had any examples?
Thank you in advance,
Anadi.
Preferable some HTML would be nice to work with. However you mention you'd like to update the "alignment" of the buttons. Therefore I would assume the "bottom:" and "right:" attributes is what you are looking for. However, since you want the alignment towards the top, you may want to use the "top:" attribute instead of "bottom:" and "left:" instead of "right:"...
E.g... The following should align these 4 buttons horizontally across the top... update the "left:" attribute to suit your preferred gutter width.
div.vis-network div.vis-navigation div.vis-button.vis-up {
background-image: url("...png");
top:10px;
left:50px;
}
div.vis-network div.vis-navigation div.vis-button.vis-down {
background-image: url("...png");
top:10px;
left:100px;
}
div.vis-network div.vis-navigation div.vis-button.vis-left {
background-image: url("...png");
top:10px;
left:150px;
}
div.vis-network div.vis-navigation div.vis-button.vis-right {
background-image: url("...png");
top:10px;
left:200px;
}
is it possible to see all the content in the top div before the second div scrolls over.
Check the fiddle
http://jsfiddle.net/KyP8L/91/
many thanks for looking.
.div-top{
height:auto;
min-height:100%;
width:100%;
position:fixed;
top:0;
left:0;
background:#ff0;
z-index:500;
}
.div-bottom {
width:100%;
background:#0ff;
margin-top:100%;
z-index:600;
position:relative;
}
What you want is though not possible with css, you can do it with jquery : http://jsfiddle.net/KyP8L/92/
Just check the scroll, if it reaches top, then assign the z-index(higher) to the .div-bottom
$(window).on('scroll',function(){
$(window).scrollTop() ;
;
if($(window).scrollTop()> parseInt($('.div-bottom').css('margin-top')))
{
$('.div-bottom').css('z-index','600');
}else{
$('.div-bottom').css('z-index','0');
}
console.log('top'+$('.div-bottom').css('margin-top'))
console.log('scroll'+$(window).scrollTop())
});
Edit:
As the OP says in comments what he wants is, to be able to scroll down
the top div and then I want the bottom div to scroll over the top div
here is the fiddle http://jsfiddle.net/KyP8L/108/
I don't actually understand what you mean by scrolls over,
but setting.div-top{ height:100%} will let you entirely visualize div-top befor getting to the second div.
And still setting .div-top to fixed wouldn't have sense.
I ran into this issue trying to implement https://github.com/jmosbech/StickyTableHeaders in an application. In my case, everything worked fine, but the header was visible outside of the container. Once it had position:fixed, it suddenly ignored z-index and overflow properties. I set up the following fiddle to demonstrate the issue:
.scroller{
overflow:scroll;
width:200px;
margin:2em auto;
}
.container{
width:400px;
background:green;
overflow:hidden;
}
.foobar {
width:350px;
height:10px;
position:fixed;
background:yellow;
opacity:0.5;
margin-left:-25px;
}
http://jsfiddle.net/z2x5Q/1/
How can I keep the .foobar div's width and fixed position, without it overlapping the div.container's boundaries?
Why are you trying to use position: fixed?
The problems you state are a standard behavior of a fixed position. The item is moved out of the flow of the DOM and you are required to explicitly state where and how you want it. I'm not sure position: fixed is giving you anything here that you would want. In fact, as soon as you take that property off your .foobar element, it looks like you get the behavior you want.
I'd suggest reading up a bit more on position fixed.
Good article here from CSS Tricks
I have a site which has several different options for left and right containers and a centre.
The left div is always the same size, however some times it's not shown.
The right has 3 options, small, normal or wide. Only one rightside will be shown at once, but some times there's none.
The center should adjust to the left as well as the right side taking up as much space as possible but not push the right div to a new line (as it does with width:100%)
Is this at all possible? Having a div just, doing what you want it to do without having to tell it how?
I made an example in Fiddle in case my explanation was unclear: http://jsfiddle.net/WDZFx/13/
Thanks in advance!
Jennica, here's a sample http://jsfiddle.net/uQ4TH/ , but it has the same problem I mentioned earlier, the center one will expand only according to the contents, though the maximum possible will be 50%;
Make use of percentages instead of specifying the individual widths for the left/center/right:
Modify your css as:
#Wrap {
width:100%;
}
#Left {
width: 10%;
float:left;
background-color:pink;
}
#Center {
width: 30%;
float:left;
background-color:beige;
}
#Right {
width:60%;
float:left;
background-color:silver;
}
I have a three column layout with a container "three-col"
In the right column I have a "Feature Tile" which is basically a 220px wide placeholder with editable content.
I need the "Feature Tile" To move with the "three-col" container, so if the content expands in height, I need the feature tile to move down with it...
May need Jquery - not sure.
Thanks!
EDIT: I want the feature tile to always be positioned at the bottom. Move = The div will expand in height based on how much content is inserted - no fixed height
Try this:
.right-column {
position:relative;
}
.featured-tile {
position:absolute;
bottom:0;
}
This will keep .featured-tile at the bottom of .right-column no matter what height it is due to variable content.
UPDATE: I think I know what you mean, try this instead.
.three-col {
position:relative;
}
.featured-tile {
position:absolute;
bottom:0;
}
This will keep .featured-tile at the bottom of .three-col
Demo: http://jsfiddle.net/wesley_murch/4FKhm/4/
Have you considered a 2-column layout with the second column being a div with another two columns in it?