I am trying to build a table which is scrollable in the x and y directions if the content is bigger than the container. I also want the header to always be visible at the top. I've got the first part working, and the header is always visible at the top, however the header column sizes do not match up with the table table sizes.
I've created this fiddle:
http://jsfiddle.net/xxQQS/1/
I am after a CSS only solution.
EDIT: There seem to be a quite a few people who seem to think that this cannot only be done with CSS. This may be true, however please don't just post to say 'no this can't be done'. If you can explain why this can't be done without CSS I'll accept your answer.
Create a clone of your table. For the first table, hide all rows except the headers using visibility: hidden. Hide the header of the other table using visibility: hidden. Place your tables inside divs with overflow properties set as follows:
<div style="overflow-x: hidden; width: 400px;">
<div style="overflow-y: hidden; height: 20px;">
<table id="head-only">
</table>
</div>
<div style="overflow-y: scroll; height: 100px;">
<table id="body-only">
</table>
</div>
</div>
May be for this you have to use JS. Check this http://www.tablefixedheader.com/
I too was searching for a solution for sticky headers to use it in my site. Finally found a Jquery plugin that seamlessly does this sticky header part.
https://github.com/jmosbech/StickyTableHeaders
You need not add any CSS, the plugin takes care of it. It clones the table header during scroll. Initialization is pretty simple
$('table').stickyTableHeaders();
Hope this helps :) As told in other answers, this cannot be achieved purely through CSS I guess.
Related
This may seem like a dumb question, but is there an official bootstrap class reference? I looked on the website and was unable to find one.
I'm looking though some of the examples and I'll see stuff like:
<div class="container-fluid">
How am I supposed to figure out what all the contain-fluid tag does? Am I expected to dig through the css for every class to look at the rules and then divine how it will affect my page? That seems like a quick way to make assumptions and run into problems later.
Is there an official reference somewhere that I'm missing? I've seen some class lists compiled by third parties, but it seems like those are always going to lag behind new changes and may contain assumptions of intensions.
Not official but current as of 2/2016 https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Printable pdf and a sortable table with descriptions to help sort through the list of classes.
http://www.tutorialspoint.com/bootstrap/bootstrap_quick_guide.htm contains a very good reference for many of the bootstrap layout and css components.
Bootstrap 3 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.
for example, to have a two-column fluid layout, simply use:
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.
You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..
"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."
More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide
Demo: http://bootply.com/91948
UPDATE for Bootstrap 3.1
container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382
I am trying to create an accordion menu with multiple floated elements. I want all of the inactive menu items to collapse to a small fixed width (40px or so) and the active item to expand to the remaining width. I want the menu to be responsive/elastic, so only the inactive menu items will have fixed widths.
Below is an example of what I want my menu to look/function like (without using jQuery to set the widths)...
Accordionza - CodeCanyon.com
I was able to accomplish the desired effect when only two menu items are displayed by floating one of the elements and giving it a fixed width, while NOT floating the elastic item and giving it a width of 100%.
Two Columns (Works)
<style type="text/css">
#one {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
</div>
Four Columns - Elastic In Between (Does Not Work)
<style type="text/css">
#one, #three, #four {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
<div class="col" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
Please note: applying float:right; to the elements to the right of the elastic item did not work either...
The problem is that if the elastic element is NOT on the end of the row, then the menu items do not remain on a single row. Please examine the fiddle below to see what I mean...
jsfiddle
So how do I apply this desired elasticity to the elements that reside in between their siblings? I really really want to keep the markup as simple as possible. Thanks in advance!
Update: I am getting close to a solution, however there is a slight problem with every method I've attempted. I will break them down, along with the issues I'm running into with each one.
METHOD 1: display: table-cell; (Suggested by onetrickpony)
Seemed like the answer, however there will not always be contents (text or html) inside the slide elements, and elements formatted with the display: table-cell; property do not recognize applied widths unless there is content inside of them. So this only works if I have content inside the slide... (I could modify the markup of my slider, but I would like to keep it the way I have it).
METHOD 2: CSS calc() (Also suggested by onetrickpony)
Not supported by some of the browsers I would like it to be... CaniIUse.com Browser Support Chart for calc(). Another excellent possibilty! One I did not know existed, and could be utilized if I made a fallback JS script for older browsers (want to avoid).
METHOD 3: Flexbox (Also suggested by onetrickpony)
Probably my favorite solution, but limited support is making me timid. Also could be used along with a fallback script. I learned about this a while back, and this is the future of CSS and layouts. Our salvation! Can't wait for full support...
METHOD 4: jQuery (Suggested by Tomasz Golinski)
What I was originally going to use, but decided I wanted to see if there was a CSS method that could be used instead. I have had some issues when using jQuery to set the width of elements. Mainly when the container is resized, and the script calculates the appropriate width while the container is resized.
So, the kind people who responded to my question have provided me with viable solutions to this issue. Any of the below is certainly an acceptable method to do what I am asking. I am simply seeking an answer that is more of a common CSS method. I am hoping that it is possible to accomplish this with some combination of styles I have not tried. I will admit I think Tomasz is correct- it cannot be done. I am leaving this question open just in case someone has a solution for me. Both Tomasz and onetrickpony have given me great answers. But I am still seeking a CSS-only solution that is widely supported by older browsers- and new, that I do not need to include a secondary script for, and that works without the need for characters inside the elements. Just want to see someone prove us wrong (that it is possible with good old fashioned CSS). If this magic answer does not come, I will be marking onetrickpony's answer as the best solution due to the fact it is CSS based, and he provided multiple solutions that are clean and simple. A combination of his flexbox CSS and Tomasz jQuery (as the secondary script) will most likely be what I use. Thanks!
If you're set to use floats, calculate the width of your "elastic" column by subtracting the widths of other columns from 100%. Example:
<div class="row cols-4">
<div class="col" id="one">One</div>
<div class="col" id="two">Two</div>
<div class="col elastic" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
CSS:
.cols-4 .elastic{
width: calc(100% - 45px * 3);
}
/* add more rules for other possible variations here */
http://jsfiddle.net/QM4LZ/
But a cleaner and easier approach is to use flexible boxes. This is exactly what they were designed for.
.row{
display: flex;
}
.col{
flex: none; /* <- don't flex */
width: 45px;
}
.elastic{
flex: auto; /* <- flex */
width: 100%;
}
http://jsfiddle.net/F7sxU/
It's also possible to achieve this with tables (fiddle), but you'll most likely run into some limitations when adding the real content and you need more wrapper elements.
the previous answer does resolve the issue however there are some problems with #onetrickpony's solution
example #1 will not work properly with dynamic number of items.
example #2 in most browsers it will work but not all browsers do support flexible boxes.
here is simple javascript code
jsFiddle: http://jsfiddle.net/aQEt3/5/
var count = $('.row').children().length; // counts how many items are in the entire row
var totWidth = $('.row').width(); // checks total width of the row
var elWidth = totWidth - ((count - 1) * 45); // counts how wide should be the elastic it
$(document).ready(function () {
$('.elastic').css('width', elWidth); // when document is ready, apply the new width to the elastic
});
beware, this is very simple code and there will be some issues if:
*there are 2 or more .row items
*you have more than one elastic class
I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.
This is the main markup that seems to have problems, in wich I really can't seem to see any errors.
<div id="search">
<div id="searchfield">
<span id="searchinput">
<input type="text" id="s" name="s" />
</span>
<button>Search</button>
</div>
<div id="searchresults">
<ul class="longlist">
</ul>
</div>
</div>
The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.
I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.
The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).
Does anyone have any idea why this is happening?
This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.
Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.
#search{
height: 400px;
}
Taking the "div#searchfield" outside of the "div#search" also works.
<div id="searchfield">...</div>
<div id="search">...</div>
These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.
It seems to work at
#search{
height: 100%;
}
no?
link:
http://jsfiddle.net/KX9BV/8/
I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
I have two elements side-by-side. Element 2 is smaller than Element 1. Both elements do not have a fixed height. I need to vertically center Element 2. How do I achieve this using CSS?
Edited:
This is what I have so far:
<div id="container" style="width: 100%;">
<div id="img1" style="float: left;">
<img src="image1.jpg".../>
</div>
<div id="img2" style="float: right;">
<img src="image2.jpg".../>
</div>
</div>
img1's height will always be greater than img2's height. I want img2 to be aligned vertically-center. Hopefully this clarifies what I am trying to accomplish.
The most straightforward and clean way to do it is to use display: table and vertical-align. However, IIRC (it's been a while since I was up on browser compatibility issues) support for display: table and friends is absent from ... some common-then version of IE, perhaps? Anyway, adding other rules to make an adequate fallback if the display: table is ignored might be good.
<div id="container" style="display: table;">
<div id="div1" style="display: table-cell; vertical-align: middle;">
<img id="img1" src="image1.jpg" />
</div>
<div id="div2" style="display: table-cell; vertical-align: middle;">
<img id="img2" src="image2.jpg" />
</div>
</div>
(Of course the styles ought to be in a stylesheet; this is just matching your original example and not knowing the use case.)
The display values table, table-row, and table-cell basically perform exactly like HTML table, tr, and td, but you are permitted to omit any of them (as I do here, using table-cells directly within tables) and the layout engine will do the sensible thing.
Not easily. Some popular hacks include using display: table-cell and a parent using display: table (I don't remember if the valign="center" attribute is needed), or using absolute positioning with top: 45% or so (not precise, but OK for small elements).
To determine the best method, we need to know more about your layout. What are they centered within? Will/can there be a large Y-distance between elements 1 and 2? Does their parent have a fixed height? Do they both have the same parents, or is one a sibling of the other? What method are you using to place them side by side?
Keep in mind that many tricks require additional hacking to work in IE, and that using Javascript is just cheating and will make your site inaccessible/annoying to people with low vision (who may be using script-unaware screen readers), people with scripts disabled (esp. on mobile or command-line browsers that may not support them well if at all), search engines, etc. It's possible using only CSS (though you may have to add some container elements), but the exact method depends what exactly you're doing.
If you only need to support new browsers like Safari (e.g., building webapp for the iPhone), CSS3 offers an elegant approach with no floats or negative margins. All details here: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
I don't think you can do this reliably without a table. Kevin's solution would probably work, unless you need to support IE (which most of us do). And, in this case, the table markup might actually be smaller than the div-based markup.
Put them both inside another element, give it a min-width and set the left and right margins to auto.