I'm new here and to Bootstrap so apologies for any stupidity.
In Bootstrap I'm trying to display .span4 in a row over 2 columns, this is because of page width, which should eventually nest into each other and leave no space. However with all I have tried at the moment I can still only manage to get each .span4 to lineup with the bottom-line of the longest span4 I have created. The site will eventually be dynamic and the size of the list could change frequently.
Looked at many different questions on here but no joy yet.
I have an example of my tryings here http://jsfiddle.net/joebarr/YJunh/
I think you're looking for jQuery Masonry. See for example: How can I float elements with different size in a tile or How to Create Grid/Tile View with CSS?
In case it must be CSS only, the accepted answer for the first link above ( https://stackoverflow.com/a/15320187/1449799 ) shows a good approximation.
Related
I have four cells on one table and another table with about eight
cells.
I have set the max-width to 300px on all cells. Now the problem I face
is that the cells do not drop to a second row if the page is too
small. (Which is in every matter at the moment haha)
I was wondering how I would go about adding dynamic rows to make the extra content beyond the page width, drop below into a new row?
All the code can be seen in the Developers tools for the following website
(Cells/Rows in the products section is the problem I am facing.)
Kind regards,
Jesse M.
Ohh my sweet summer child,
The <table> element is "designed" to behave that way. The table will try to cramp up all the columns in the possible space and based on various css and html attributes, hide/overflow/cramp-up the data in columns, But never will it allow the columns of one row to flow down to another row.
So you are left with a lot of options using CSS and HTML elements.
If you are into frameworks, I recommend Bootstrap that is designed to work exactly that way, and use the provided col-xx-x classes for the elements that need to be in a row at some screen width, and "drop below into a new row" on other screen width.
I have five columns I want on the same row. Within each of these boxes there are numerous form inputs some of which need to be on the same line or otherwise organized as well.
I have been attempting to mix it together using Bootstrap's grid system but nothing I seem to do is working as intended. I thought I could just throw everything into a container, and then use nested rows and columns to achieve the desired effect.
For attached Bootply, the Firstname, Middle Initial, Last name, and Nickname are a great example of what I'm going for. I want the "Name & Address" section to be one column, and within that I want all of the information to be on 3 rows
http://www.bootply.com/HhszskhttD
Is Bootstrap grid layout the best way to approach? Do I just need to mess with the sizing of my inputs? I have also tried mixing in form-group-sm but that did seem to go in the right direction. I suspect where I'm using form-group in relation to the rows and columns is the root of my issue.
What's the best way I can perform this type of layout?
Bootstrap is perfect for this! I love (LOVE) the Bootstrap Grid System.
To do what you would like to do it is very simple. For the first row put class="row". After that it is all easy stuff. Nesting is just how it seems, but I will explain a little bit:
Lets say I have the following columns: col-xs-4, col-xs-4, col-xs-4. Now in one of those columns I want to separate boxs, I would add the following: col-xs-6, col-xs-6. You just have to remember, if you are nesting rows, they add up too 12 always. So when I am adding two 50% squares to the col-xs-4 it would be col-xs-6 and NOT col-xs-2 (col-xs-2 would be 16.66%).
So nesting is very simple, and it is not as tough as it seems.
EDIT
Let me throw an example out for you! :)
http://www.bootply.com/4yFHVS5g9r
The Bootply above shows how simple nesting is.
EDIT 2
Another example:
http://www.bootply.com/nJQEzSzsU7
Also, each nested column has 15px margin.
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions
I had a question with regards to fluid arrangement of tables. I have attached a screen-shot below to try and explain what I am trying to achieve.
Basically, I have a number of dynamically created tables. Their widths are fixed but their heights can vary. What I am trying to achieve is, the maximum utilization of space when the browser window is re-sized (in terms of organization of the tables).
I have tried the following:
1. Arrange the tables in descending order of the number of rows they have.
2. Using a style of 'float: left;' on the table (or a div surrounding the table).
However, as you can see below, there is a gap below on the first column that could have been utilized by table 4 (the last one below), but it hasn't because table 3 (column 2, row 2) is taking up some space which prevents table 4 from being placed above.
I hope I've described it in a manner that could be understood, if not please let me know how I could clarify any points so that you could help me out.
Basically trying to get a fluid design with the maximum space utilization. Any ideas on how I could achieve this?
Thanks in advance.
Example http://img717.imageshack.us/img717/5492/exampleqm.jpg
Can't be done without javascript (or a whole lot of assumptions and restrictions).
Try the Columnizer jQuery Plugin.
Try the jQuery Masonry plug-in.