I have a page whose entire content is wrapped inside a div – <div id="wrapper"></div> This div gets applied the property transform: scale(1.3) at 1600px & above.
Inside this wrapper, I have two divs side by side with their parent div set to display: flex
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
On scrolling the content, the sidebar is supposed to stick to the top and not scroll. It does so but only when the transform property isn’t applied. Once the transform property gets applied to the wrapper, the sidebar starts scrolling in the opposite direction.
Here is link to the demo – http://cpll.co/happicities/the-happicity-model/
Set the width of your browser’s viewport to at least 1600px and you will notice this behavior.
Check this out. This may solve your problem
#thm-container #thm-container-main {
align-items: flex-start;
}
Related
I have three div a, b, c, all of them have "position: static" in there style (which is the default value for CSS position). They are all under the parent div, which is scrollable (CSS: "overflow-y: scroll").
<div id="parent-div">
<div id="div-a">...</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">...</div>
</div>
Div-a's height constantly change (for example, there are new children divs constantly appended under div-a). Normally, when div-a's height increase, div-b will be scrolled down.
I want to always keep the div-b at the center of the screen, no matter how div-a change in height
Is this possible in Javascript (or CSS, or both) ?
PS: I don't wanna use the CSS "position: fixed/sticky" because it's not possible in my project.
It's practically impossible to answer your question, because you haven't added enough detail to your question. How is div-b in the center of the screen at the minute, because what you've posted doesn't seem to illustrate how it would be positioned there. Anyway, I've somewhat guessed at your setup. If you don't want to use sticky or fixed, you are left with the only remaining potential solution, to set the parent to relative, and use position absolute to position the div.
#parent-div {
overflow-y: scroll;
position:relative;
}
#div-a {
height: 400px;
border:1px solid green;
}
#div-b {
position:absolute;
top:0;
}
#div-c {
position:static;
}
<div id="parent-div">
<div id="div-a">div a</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">div c</div>
</div>
I have a sidebar inside a div and whenever I increase the length of the information inside the div, the sidebar changes positions. Would there be any way for me to fix the sidebar in place regardless of the information?
Can you please try this one., I have done it through flex layout. The sidebar does not change position based upon the content of main div.
#main{
background-color:#BED3E5;
overfolow:auto;
display:flex;
}
#sidebar{
background-color:#efdfbb;
flex-basis:15%;
flex-grow:0;
height:calc(100vh - 50px);
}
<div id="main">
<div id="sidebar">
</div>
asdasdasd
</div>
this is the code for two divs placed side by side such that on minimizing the first div the second should automatically occupy the remaining space. When the first div is brought back to original position, the second should automatically reduce its size.
One more constraint here is that, the sizes of the divs are not fixed by pixels, they are infact had to be mentioned as percentages. Can any one help in this regards?
<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
<div class="right">
<!--<button class="collapse-expand"></button>-->
</div>
Demo here: http://jsfiddle.net/rams10786/wrv8r91r/
I think I have acomplished what you want by not floating the right div and setting it to always 100%.
.right{
height: 100%;
width: 100%;
background-color: #67b168;
}
Also I commented the size change in the jquery code:
if($('.left').css("width")=='37px'){
$('.left').animate({width:"20%"});
// $('.right').animate({width: "80%"});
}
This is the updated code: http://jsfiddle.net/jfpamqb7/1/
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?
The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}