I always encounter this issue when I'm using Bootstrap for tables.
It seems Bootstrap automatically makes all columns equal width. The issue is something like an email address column gets cut off while a column with just a single digit has more than enough room.
Is there a simple way to get around this (without hacking each individual column?
Related
I am working on an interface for a Raspberry Pi based embedded device. The interface is built with Bootstrap 4 and is currently centered around a .navbar at the top and a .row > .col structure with just two columns within the row. Within each column there are multiple cards. Depending on the user actions and enabled features, there are one or two cards that won't be rendered and the others can change in height.
My current issue is that upon a specific user action, a new card will be added to the first column thus pushing the other cards down the page and some out of view. When this happens, I want one or two of those "out-of-view" cards to then instead show up in the second column.
I can't seem to figure out a good solution to this problem. I want to keep the two columns (at least in visuals) and dynamically assign the various card elements to one column or the other.
If I leave the current structure of .row > .col then each of the card elements are static within each column via the HTML thus short of putting the card in the DOM twice and hiding one or the other, I need a different solution.
If I rebuild the page to use flex-box instead and rely on wrapping, I run into issues where one card will be larger than the other within the row causing a bunch of empty space to show up. That is before I even try changing the order of each card. On to the next solution.
Trying the grid system, I can get something close to what I am looking for but it isn't perfect. The cards move from one column to the next by adjusting grid-template-areas. Since there are cards of different heights (and can change during use), I have some cards spanning multiple rows so there isn't any empty vertical space between cards in a given column or vertical growth to any cards beyond its internal content. This works fine for one given combination of card order and heights, but doesn't for others; I run into the same problem as with the flex-box with empty space within one column for a given row.
I want this to be mainly HTML and CSS driven in order to keep the javascript to a minimum. I figure that I would add some functions to call when various user actions happen (such as with changing the grid-template-areas), it is just a matter of figuring out what HTML and CSS combo to use before writing the necessary JS.
Is there something I am missing with the solutions I have tried so far? Is there other solutions I have overlooked? Do I just need to use JS to essentially "cut" the entire card HTML code block from one column and "paste" it into the other column? Any insight or direction to another solution I can look into is appreciated!
Here are some visuals:
Initial layout:
After that, the user could cause card 2 to pop up which pushes card 3 and 4 out of view:
When that happens, I want card 4 to show up in the second column:
When using the grid system, due to how the various cards can change in height, I have not been able to find a way to size the rows dynamically enough to correct these anomalies (growth if the height is not capped, or empty space if it is):
I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
I have a bunch of data input screens and they all use a basic table filled with asp.net textboxes. Some of the textboxes (the smallest ones) are set to 250px in width. The others have been set a width in px depending on what makes them align best at 100% zoom.
The issue is when you zoom in and out, it's clear that the boxes don't really line up on the far right.
Can anyone suggest a way to properly align these last columns. It's worth noting that for some reason when using 100% in the last column that it busts outside of the actual table a certain way for unknown reasons.
The columns with the larger textboxes are defined using colspan of 2 or 3.
The boxes at 100%
The boxes at 75%
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
I'm working on a MVC application and am having some trouble with the HTML/CSS layout in regards to one of the partials that we have.
The shell of the application contains two columns that expand to be the height of the column with the most content. The left column contains the navigation for the app. The right column is the content area.
I've managed to get this part working appropriately.
Where I'm having issues is that inside for some pages, the content area (right column) needs to be split into two columns. I need both of these columns to dictate the height of the content area, which in turn would dictate the height of the main navigation.
Any input would be incredibly useful! Thanks!
EDIT I got it working, but am not entirely happy with the solution. It requires me to use inline-block, which reads white-space. As a result I used the comment across two lines strategy, but I'm afraid that this would get deleted by somebody while editing/cleaning the project up after the fact.
http://jsfiddle.net/StSmith/RzKJX/
.
I'd imagine that, if you simply added the columns they would automatically fill the space up thus dictating the height of 'content'.
However, if you're floating the columns then the containing element won't pick up their height. In this case you'll need to add, either a cleared element below the columns, or, better add 'clearfix'.