I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
Related
My Bootstrap page begins with a single row with two columns. In the first column there is some text content that varies in size. The right column will have a background image and the text in that column will always be about the same size. I want the right column to stretch to always be the same height as the left column and to also stretch when the user resizes the window so much that the right column becomes its own row beneath the left column. May I ask how to do this?
If you are using Bootstrap 3 and you don't want to use flexbox or Bootstrap 4, have a look here:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It's pretty robust, just add classes for the row and desired columns (I usually use row-md-height and col-md-height, for smartphones it's usually not needed.
Does bootstrap have a way to specify justified columns, in the same way that I could do with tables? In other words, I know I want six columns across, but using span2 will give me six equal columns. But this will look inconsistent because some of my columns have less text than others, and I want them equally spaced.
If I resorted to tables and didn't specify column widths, it would distribute each column width proportionately, giving me the exact effect I'm looking for.
Any ideas?
No, you can not. Not unless you want to tweak the grid yourself. Having a span2 column that has less width than other span2 columns breaks the layout and defeats the point.
One possibility is to create an inner div inside the column and give it either padding or margins to make its content area smaller.
Otherwise, just roll your own grid and use that instead. It's fairly easy.
How to format a table using CSS such that:
the table is within the screen that the browser's horizontal scroll bar doesn't show up and users don't need to scroll horizontally to see the right side of the table;
the cells use as much width as necessary, that a column containing cells that only has numbers such as "1", "21" will not use a width that's much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;
for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can't be displayed, let horizontal scroll bar show up for that cell.
Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?
My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn't taken into account, which is good for the table's width but bad for the row's height: it doesn't expand to include the scrollbar.
Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell's content, but in doing so makes it so that we can't specify, as before, that the last column should take all leftover width.
See also: Why does overflow:hidden not work in a <td>?.
These tips may help:
1- Do not specify any width for your cells
2- When you insert a page automatically there is a Style created and assigned to it which says:
width: 100%;
go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.
3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.
4- You may want to set a width for your table or put the table in a panel and set a width for the panel.
I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.
In a two column template, how can we use background on each column repeated when height of both columns differ?
eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.
Note: heights may differ because of dynamic content that will be loaded.
Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.
I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.
The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.
Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.
Of course, this really works best with fixed width layouts, etc.
I have a table in which in one column some content is initially hidden, but appears on hover. The problem is that on hover the content then resizes that column's width and distorts the table.
How can I set the column to not resize itself without setting table layout: fixed or setting a width.
The table layout fixed causes columns to size themselves in unnatural ways, using only the first row, which is unacceptable due to the large variations in content length in different rows.
Is there a way to allow the table to size widths according to the longest column of any row, and then disallow resizing when it's hovering.
I'm using css hover to do my show hide if that's relevant. Thanks.
Why don't you just change the opacity attribute on hover, rather than the display attribute? So to reveal the content you would change opacity from 0 to 1, and to hide it from 1 to 0.
Hide the content using a div or a span which "covers" the column instead of hiding the actual content itself.