I have a quick question with designing the "yearly subscription" pricing table here - http://iknowfirst.com/4637-2/
As you can see,the columns are not all equal in height, and I am not sure how to go about fixing this. All I did was duplicate the tables used in the "monthly subscription" tab and change some of the information. Anyone have any solutions for fixing this?
Your help is much appreciated!
You've got a couple of options. On the cells that are longer, you'll notice they have extra lines of text.
1) Just add
<br>
to add blank lines to the other cells.
2) Assign CSS classes to each row of cells, and set a min-height property.
Personally, I'd go with #1.
Related
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 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.
I have mx DataGrids with custom item renderers on one column based on HBox. I tried to optimize them using the spark MXDataGridItemRenderer class, but using it results in the first row of the column being 2px shorter than the rest, as if the first row got hidden under the grid header. From the second row onwards the height is ok, but the first row problem results in every row being shifted up 2px. When selected, it looks just bad.
Any ideas would be much appreciated.
I have seen this issue before as well. I am not sure what the RIGHT answer is but to solve it for my app I stopped using the spark crap. I see the benefits of spark but for me, its frustration level outweighs its usefulness. So the way I see it, you have 2 options:
1: Create MXDataGridItemRenderer for each grid column so that they are all uniform.
2: Don't try to optimize them and just stick with the HBox solution (thats what I did).
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.
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.