I am trying to create a JS web app with tabs. The speciality of the interface is that the tabs should be as high as the window is and the content should be scrolled if higher than the window. The content is built up from several left floated panels that fill the screen.
I already have part of the solution working but I cannot figure out how to set the 100% height and the scrolling for the container.
http://jsfiddle.net/KhwZS/1242/
<div class="tabs">
<ul>
<li>Tab1</li>
</ul>
<div id="tab1">
<div class="container clearfix">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
</div>
http://jsfiddle.net/KhwZS/1245/
CSS:
html, body {
height: 100%;
}
.tabs {
height: 100%;
}
#tab1 {
height: 100%;
overflow: auto;
}
Maybe you have solved this already, but here is a solution with position: absolute, that works for us. Could be a starting point for you.
/Staffan
.tabs{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
}
.ui-tabs .ui-tabs-nav {
position: absolute;
top: 0;
left: 0px;
height: 18px;
right: 0;
}
.ui-tabs-panel {
position: absolute;
top: 18px;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
See DEMO.
Keep the UI tabs fixed by using CSS position:fixed.
.ui-tabs-nav {
position: fixed;
width: 100%;
}
Then use jQuery to give the contents a margin-top so that they would be shown below the UI tabs by default.
$("#tab1").css("margin-top", $(".ui-tabs-nav").height());
Related
Position: sticky with bottom:10px on div with class sidebar is working as expected but with property top:10px is not working as expected?
With position: sticky with bottom: 10px on div with class sidebar, when we scroll down the div stick to view port with a bottom edge above 10px to the view port.
Similarly with position: sticky with top:10px on div with class sidebar, as we scroll up the div should stick to top with the top edge of div 10px below the viewport.
But it is not working this way, what is the problem?
code: https://jsfiddle.net/c7vxwc7g/
.container{
/*width: 1654px;*/
width: 100%;
background-color: #f0f0f0;
margin: 0 auto;
}
.sidebar{
position: sticky;
bottom: 10px;
width: 400px;
margin: 5px;
background-color: teal;
height: 1000px;
display: inline-block;
}
.mainpage{
width: 1130px;
margin: 5px;
margin-left: 0px;
background-color: steelblue;
height: 6000px;
display: inline-block;
}
.footer{
height: 500px;
width: 1654;
margin: 0 auto;
margin-top: 10px;
background-color: purple
}
.test1{
background-color: red;
position: relative;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: relative;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebar">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
<div class="mainpage">mainpage</div>
</div>
<div class="footer">footer</div>
</body>
In my case, the parent of the sticky element (the sidebar) had a smaller height than the content => the sticky element wasn't going down more than the sidebar's height.
The solution: I made the sidebar's height equal to the content's height (using display flex on the content's and sidebar's wrapper).
HTML:
<div clas="container">
<div class="content">This initially has a bigger height than sidebar.</div>
<div class="sidebar">
<div class="sticky"></div>
</div>
</div>
CSS:
.container { dislay: flex; } // By using this I make the sidebar the same height as the content
.sticky { position: sticky; top: 0; }
I have some issues with div sizing when I resize browser window. I want child divs always remain inside the parent div and decrease in size proportionally to parent div when browser window resizing. I guess it should be a javascript but I dont know which one exactly and how to use it. Any advice will be appreciated!
#parent
{
position: fixed;
width: 100%;
height: 11%;
background-color: white;
left: 0;
}
#child1
{
left: 100px;
position:absolute;
}
#child2
{
position: absolute;
left: 700px;
margin-top: 15px;
font-size: 1.5em;
}
<div id="parent">
<div id="child1">
<a> <img src="img\linkedin.png" alt="jhj" width="200px;" height="70px;" /> </a>
</div>
<div id="child2"> <a>Home</a> <a>Examples</a> <a>Tricks</a> <a>Contact us</a>
</div>
</div>
Try changing the styles for both children to the following:
#child1 {
left: 100px;
position:absolute;
width: 50%;
}
#child2 {
position: absolute;
right: 0;
margin-right: 20px;
text-align: right;
width: 50%;
margin-top: 15px;
font-size: 1.5em;
}
To be able to affect to the parent div the #child2 should be position: relative; like this:
#child2 {
position: relative;
top: 15;
margin-top: 0;
}
https://jsfiddle.net/eapo/1tkqsm5q/
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
I have been struggling with this problem for over 2 hours,
Is there a way to make a div fixed while it is inside a bigger div.
When I scroll I want to keep the right part not scrolling.
So my question is, is there a way to do this without jquery?
Thanks
You have to position the inner div absolutely:
.outerDiv {
position: relative;
/* give it some height */
}
.contentDiv {
height: 100%;
overflow: auto;
}
.innerDiv {
position: absolute;
right: 0;
left: 50%;
top: 0; bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/wSxss/
Adjust the positioning values according to your needs.
This fiddle demonstrates the following solution:
HTML
<div class="wrapper">
<div class="scroller></div>
<div class="fixed"></div>
</div>
CSS (example of key parts)
.wrapper {
position: relative;
height: 40px;
overflow: hidden;
}
.scroller {
padding-right: 200px;
height: 100%;
overflow: auto;
}
.fixed {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 160px; /* .scroller padding minus the right offset to accomodate scroll bar and minus any real separation between it and the scroller */
}