I'm guessing this isn't possible, but here goes.
I have two tables, and I'm trying to get them to sit side-by-side so that they look like one table. The reason for this, instead of using one larger table, is that the data in the second table needs to be handled on a column basis, not row basis, for performance reasons like caching and AJAX-fetching data. So rather than have to reload the whole table for a single column, I decided to break the column out into a separate table, but have it visually seem like a single table.
I can't find a way to forcibly put the second table next to the first. I can float them, but when the first table is too wide, the second one breaks to the next line. Here's the kicker: the width of the first table is dynamic. So I can't just set a huge width to their container. Well, I could set a huge width, like 1000%, but then I have a huge ugly horizontal scroll bar.
So is there any way to tell the second table "Stay on that same line, no matter what! And line up right next to the previous element please!"
Put your two tables in another table with a single row and two cells. Not elegant or 'modern' but it will work.
If your table is one table, you should have sticked with one table.
You are trying to fix a data manipulation issue by using a different document structure.
Using a different class per column with the DOM navigation tools provided by library such as jquery, you should not have any problem accessing cells or columns you want to update.
I would not go the route you chose.
How about this:
<div>
<div class=lspacer>
<table1>
</table1>
</div>
<div class=rspacer>
<table2>
</table2>
</div>
</div>
Then, for lspacer, you can clear it left, and for rspacer, you can clear it right.
Also, you specify the width.
Related
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:
I've run into a problem of how I should code some columns of content.
Problem
This is what is being output for the state of large-4; three columns with different sized boxes inside.
But what happens when I have medium-6 and the responsive mode kicks in? I get this:
You might understand my dilemma here. I want the content to evenly distribute between the, now, two columns, and not ending up with a "row" and then having the green column under the purple, but rather the teal one under the purple and somehow evenly put its boxes, if possible, over two columns.
Since the boxes inside the columns are sorted by date, the order has to be as they are in the large-4 picture (i.e. first date at the top left, going down, moving to the next column to the right, starting from the top, and so on).
My tries to solve this
I thought that Foundation 6 with the flex grid could possibly help me out, but I have yet to find anything.
I also gave the thought and try of using CSS3 column, but the break my boxes in half and make it really hard to manipulate.
If my request isn't clear enough, please let me know and I'll try to be more specific.
Thanks in advance!
I've got a page of products, and some of them might have extra rows. Regardless of that, my goal is to have every product display across the page, left to right, top to bottom.
See this example: http://jsbin.com/lijisa
If you modify the JSON data so that each product has two numbers in the variations array, everything lines up perfectly.
How can I get all the columns to be a standard height, without actually setting a hard height value?
What you are looking for is known as a "masonry layout" there are a few libraries that will allow you to do such a thing
Salvattore
http://salvattore.com/
Masonry
http://masonry.desandro.com/
I also found this achieving the same effect using column-width
http://www.bootply.com/118335
Use the hidden/visible helper classes combined with clearfix, to reset your rows only on appropriate devices, like so:
Example: http://www.bootply.com/YpH56xyzDB
The hidden/visible aspect lets you clearfix between specific columns only when on the right device.
Is there a way to create a dynamic CSS for 2 columns? What I mean is, there are 2 columns in my webpage, the left and right column. It is similar to Facebook, where the profile picture is the left column and the right column is where your feeds are located. When a link is selected from the left column, without refreshing the page, the right column will display the page automatically. The left column is where my links are located and it is fixed. The only change factor is my right column. How can I create and apply the CSS?
You don't need a CSS template in order to use columns. All you need to do is set your column widths to percentages instead of pixels. If you're using a three column grid, with one div taking one column and the other spanning two, then the percentage for the first column would be 33.3333333% (don't bother rounding up, the browser will take care of it) and the second div would be 66.6666666%.
Also, in order for your second div to refresh without loading another page, you'll have to use Ajax.
There are css3 columns but they are not supported by IE. What a surprise!
It sounds more like you just need a css layout framework. Search for css frameworks / templates.
I of course recommend simpl.css.
The page is ugly at the moment but will be updated soon.