How to make web2py2.3.2 grid with vertical scroll bar and fixed header?
Applied css to make it vertically scrollable as below -
.web2py_grid > .table {
height: 504px;
overflow-x: hidden;
overflow-y:auto;
}
.web2py_grid > .table > div > table > thead {
position: fixed;
}
When I am applying - position: fixed; property for the "thead". Its giving me fixed header but in that case its width doesn't get adjust with the contents below.
Please Help!
Hee guys I found out one fantastic solution here- http://www.fixedheadertable.com/
Related
The panel height is fixed at 300px, the header and content might change but the footer should stay fixed at the buttom.
What is the best way to achieve this ?
Setting
.panel {
height : 250px;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
}
Cause the footer to slightly slide outside the border of the panel and to lose width.
I'm trying to find a solution with as little fixed sizing as possible.
Bootply example here
Thanks.
I think this solution may help you
http://www.bootply.com/giovapanasiti/126477
Good day!
the panel slides out because it's wrapper has margin-bottom wich bottom: 0 does not account for.
A simple solution wold be to apply this css:
.panel {
height : 250px;
margin-bottom:0;
position: relative;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
margin-bottom:1px;
width : 100%;
}
http://www.bootply.com/126692
Using Bootstrap 3 I have styled the .row class to be a height of 3.5em.
I have several inputs in the row. They align to the top of the row and I would like to get them bottom aligned.
I have tried a style of vertical-align:bottom but that does not seem to work.
The reason I want to have things bottom aligned is that I have a floating label that I have popping up above the input field.
Any suggestion on how to accomplish a bottom align?
EDIT
Maybe i misunderstood what your want to do.
If you want to vertical align the content of your row, you can use that solution :
.row-bottom-align {
display: table;
table-layout: fixed;
}
.row-bottom-align > div {
display: table-cell;
float: none;
vertical-align: bottom;
}
And add row-bottom-align to your row.
See it in action : http://jsfiddle.net/G5e3e/
======
ORIGINAL ANSWER
Here is a way to have your columns with the same height.
(you can also have the same render with the above solution by setting vertical align to "top", but here is another way to do that with margin/padding)
.row-same-height {
overflow: hidden;
}
.row-same-height > div {
margin-bottom: -2000px !important;
padding-bottom: 2000px !important;
}
Just add row-same-height class to your row
<div class="row row-same-height"></div>
Look it in action : http://jsfiddle.net/Cxa2m/
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
Currently I'm working on a website for myself. I decided to go for a header content footer design where the footer shall be stuck to the bottom all the time. Hence I set up a wrapper with position: relative, containing the header (#top), content (#middle), and footer (#bottom). Bottom got position: absolute with top: 0.
I've also set height: 100% for html and body and a appropriate padding-bottom for #middle to ensure that my footer won't overlap #middle.
Please find a simplified sample version here: http://www.webdevout.net/test?0w
Here is the CSS in question:
* {
padding: 0;
margin: 0;
}
html, body {height: 100%}
#wrapper {
position: relative;
background-color: #ccc;
min-height: 100%;
}
#middle {
background-color: #900;
padding-bottom: 200px;
}
#top, #bottom {
width: 100%;
height: 200px;
background-color: #bb5;
}
#bottom {position: absolute; bottom: 0;}
Now here's my problem: my understanding of the box-model is, that one should be able to achieve the same (keeping the space for the footer) with margin-bottom instead of padding-bottom for #middle, but margin-bottom isn't applied to it. I've read that min-height doesn't consider padding, border or margin, but the padding is considered here while border and margin aren't.
FF and Chrome show different behaviors when margin-bottom is used instead of padding-bottom for #middle: while Chrome just ignores the margin, FF applies it below #wrapper. My general idea would have been that my container should grow to the total size of its content with min-height, including height + padding + border + margin of #middle, but obviously it just grows to overall size of #top + height of #middle + padding of #middle.
I wonder what is the correct behavior and why padding and margin aren't interchangeable to keep the space for the footer.
While an explanation would be much appreciated, I'd be also thankful for a link to a source which could help me. I'm sorry if this duplicates another post, but I didn't find something (neither here nor via Google) fitting my special problem.
Thank you!
i had faced same problem like u are facing.
You have to use this piece of code.
#middle {
display: table;
margin: 2% auto;
width: 100%;
}
use of display : table works for me to set margin from top and bottom.
I want to use overflow on a div to show all div and image, and text to but for this example i used only images.
i need a horizontal scroll, if i only use image its work well with the white-space: nowrap; css but if each images are in a div the sroll disapear and images don't show all.
Example 3 here
the first exemple work if i give a width to a wrapping all div but i can do this methode since all the div are called dynamicaly, it's mean that i can got 1 div to hundred one.
Here the code of the 3rd example
#dmcscroll2 {
white-space: nowrap; display:
block; width:660px;
height:112px;
overflow: auto;
overflow-y: hidden;
/*overflow :
-moz-scrollbars-horizontal;*/
border-style:solid;
border-width:1px;
border-color:#000;
}
.div-image{
float: left;
width: 125px;
}
how can i do for the 3rd technique without knowing the number of div with images a will get from a dynamic javascript call.
You may look at the source code to see more in detail
You can remove the float:left from .div-image CSS and add display: inline instead:
.div-image{
display: inline;
width: 125px;
}
That seems to work the way you wanted it to on your example website.