I am building a chat application using Bootstrap as a base and fluid-container because it needs to be a 100% height and width app but it seems that Bootstrap does not like this so I've ended up with some custom CSS to sort it.
The idea is that there are two panels shown on the page, the chat panel and the users panel and the panel-body of both should overflow automatically inside itself.
The problem is that now I am also using panel-footer and it's created this strange problem, see here in the screenshot.
Here is the CSS:
.panel {
margin-bottom: 0;
height: 100vh;
max-height: 100vh;
position: relative;
}
.panel-body {
overflow: auto;
position: absolute;
top: 30px;
bottom: 30px;
left: 0;
right: 0;
}
.panel-footer {
position: absolute;
bottom: 0;
}
By the way, I am complete beginner in custom CSS so if I am making it more confusing then it needs to be, and it can all be simplified, please also tell me that! I appreciate it :)
.panel-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
Is there any reason why positioning the panels body and footer abolute? When giving the body a height the footer automatically sticks to the bottom
A similar issue, except that my footer ends up affixing itself to the bottom of the PAGE, not the panel in question. My HTML (everything stripped down to bare bones for testing while I put this together) and minimal CSS (again, everything stripped down to barest while I get this working) are below.
<div class="panel panel-default" style="height:100%;border:1px solid pink;"> <!-- border so I can see what's up -->
<div class="panel-heading">
<h4>Select or create case</h4>
</div>
<div class="panel-body" id="caseSelector">
<!-- empty during testing so as not to muddy the test-->
</div>
<div class="panel-footer case-panel-footer" style="border:1px solid cyan;"> <!-- border so I can see what's up -->
<div class="col-sm-6">
<button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button>
</div>
<div class="col-sm-6 text-right">
<button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button>
</div>
<div class="clearfix"></div>
</div>
.case-panel-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
I simply can not get this panel-footer to sit at the bottom of the panel's containment area, even though the pink border clearly shows the panel is taking up the whole region available to it in the container.
Related
I'm not quite sure how to title this better, so edits are welcome.
Basically I wanted to animate a right side sliding-in panel in a page over a fixed div panel.
My jQuery ajax does what its supposed to do to animate it. However, I just noticed that after adding the sliding-panel there was a horizontal scroll bar. Indeed it was my sliding-panel.
How can I "hide" it without extending or allowing the user to scroll horizontally and find the empty panel?
My HTML looks like this:
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
CSS:
.right-pane{
width:400px;
height:90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
Apply to body if no overflow is needed. Read about overflow
.right-pane {
width: 400px;
height: 90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
}
body {
overflow: hidden;
}
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
As a possible solution - use overflow-x: hidden on the body tag. But in case the user doesn't have a screen big enough to show the whole, horizontal scrollbar will not appear. Hence the usability of your website will be significantly reduced.
I can suggest you to have a look at this css library in order to achieve the effect of sliding panel - https://daneden.github.io/animate.css/. Then you just need to care about hiding your panel with display: none and when you need to show it - add bounceInRight class to it.
I'm having trouble setting up a "master-detail" view using Bootstrap 3. I'm attaching a picture of the specific layout I'm trying to get:
I've created a div with .row spanning the 12 columns for the header, and then another div.row with a div.col-md-4 and div.col-md-8 for the two columns. But obviously this doesn't achieve what I'm looking for. I've tried playing with the position attribute, but it seems to conflict with the Bootstrap CSS and I always just get jumbled text.
Thank you very much in advance and let me know if you'd like me to provide more details on what I'm looking for. Hopefully the pic is clear.
You are looking for
position: fixed;
This ensures that the element is always static relative to the viewport. You will then use the relative positioning properties to place it where you want it to go.
For the top element (say, your navbar), you can set:
top: 0;
For the bottom element, you can set:
bottom: 0;
So, something like this:
.row, .col-md-4, .col-md-8 {
border: 2px solid pink; /* For showing the div borders */
}
.row.main-content {
background-color: blue;
height: 300px;
margin-top: 20px; /* Needs to match the height of .row.top */
}
.row.top {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: red;
z-index: 9999;
}
.row.bottom {
position: fixed;
bottom: 0;
height: 20px;
width: 100%;
background-color: green;
z-index: 9999;
}
.scrollable {
overflow-y: scroll;
height: 300px; /* May need to be set somehow */
}
<div class="container-fluid"><!-- To get it to take up the whole width -->
<div class="row top">
</div><!-- row -->
<div class="row main-content">
<div class="col-md-4">
<div class="sub-header">
</div>
<div class="scrollable">
<!-- menu items here -->
</div>
<div class="sub-footer">
</div>
</div>
<div class="col-md-8 scrollable">
<!-- Product detail goes here -->
</div>
</div><!-- row -->
<div class="row bottom">
</div><!-- row bottom -->
</div><!-- container-fluid -->
Hope that helps.
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I've designed a website as you can see below, which has a FIXED header (white), then a sub-header, main content, sidebar (red) and a footer (grey).
I have created the wireframe for the website in HTML/CSS, but can't get the sidebar to work properly.
I would like the sidebar to start on the sub-header and go all the way to the bottom of the page to end after the footer (see the image below) no matter how much content there is in the main section, but I can't get it to work.
Please help! Here is my current efforts on JSFIDDLE, as you can see the sidebar doesn't go to the bottom of the page: http://goo.gl/EQ7CJh
Remove the position: relative from content div and use margin-top to position the panel, as shown:
#content {
height: 100%;
}
#sidebar {
border: 1px solid skyblue;
width: 100px;
position: absolute;
margin-top:7em;
top: 0px;
right:0px;
bottom: 0px;
}
Updated jsfddle
Can you try this jsFiddle http://jsfiddle.net/2ZhpH/1093/
I have changed the HTML structure and added the #sidebar css to this
#sidebar {
position:absolute;
top:48px;
border: 1px solid skyblue;
width: 100px;
position: absolute;
right: 0;
bottom: 0px;
}
Demo
If you want to have side bar to the side of The div which contains sub-header main and footer the you should have a Grid structure like this
<div id="header" class="...">
</div>
<div class="divide"> <!-- divide class to have like 85% width leaving rest of it for side bar -->
<div class="sub-header">
</div>
<div class="main">
</div>
<div id="footer">
</div>
</div>
<div class="sidebar">
</div>
I am trying to make an iOS app using HTML and CSS. For responsive design i am using twitter bootstrap. Now what i need is to make a header (at the top of the screen), a form, in the middle of the screen. That form should be scrollable only if user wants to add more details (it would be dynamic, if user enters the required details only, then it should not be scrollable). I am experiencing a problem where I am not able to place the form in the center of the screen. I want it to be vertically as well as horizontally centered.
When i change margin-top, i am able to make it in the middle, but it isnt responsive and gets displaced in ipad resolution. Please help, i am not a designer and new to twitter bootstrap.
Here the fiddle: http://jsfiddle.net/TLX7Z/1/
Here is my code:
HTML
<body class='pagination-centered'>
<div class='navbar-inner headercontainer'>
<center><div id="hello"><a href='index.html'><h1>Hello there</h1></a></div></center>
</div>
<div class='mainbodycontainer row-fluid pagination-centered'>
<div class='sampleapp'>
<div id='title1'>Here, Enter the details</div><br>
<input placeholder = "first feild" class="address span10" type="text">
<div id= "div1"><input class="address span10" id="friend1" type="text" placeholder = "feild 2"></div>
<div id='wrapper'><div id='button2' class="btn btn-danger"><i class="icon-white icon-minus"></i> Remove</div>
<div id='button' class="btn btn-success"><i class="icon-white icon-plus"></i> add</div></div>
<div <div id="submit-button" class="btn btn-success ">Go</button>
<label><div id ="result"></div></label>
</div>
</body>
CSS
#import url('http://twitter.github.com/bootstrap/2.3.2/assets/css/bootstrap.css');
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
width: 100%;
height: 100%;
padding 0;
}
.headercontainer
{
width: 100%;
}
.sampleapp
{
margin-top: 20%;
}
use this and just replace width & height with values:
this will put your sample app in center of the page :
.sampleapp{
width: width;
height: height;
position: fixed;
top: 50%;
left: 50%;
margin-left: -width/2;
margin-top: -height/2;
}
Fiddle