As you can see in the screenshot below, the Type column is not wide enough, and therefore its content is wrapped. This looks ugly.
How might I increase the column width?
Related
In HTML tables that are wider than the viewport, text is wrapped, so the table may fit after all. To force all fields on a single line (and possibly extend outside the viewing area) I use 'white-space: nowrap' for all TDs in the table.
This is just fine for most of my tables, but in one scenario this does not work very well. I have a table with 20 columns or so with terse column headings and content, except one, which is a description field of 256 characters maximum. Using 'nowrap' is quite right for all columns, but the description column is now a very wide column indeed.
Is there a (CSS) way to specify that fields should be as small as possible (no min-width), keep on one line (nowrap), except when longer than some maximum field width (max-with: 250px). It would be nice if it could be applied to all TDs, where a reduction of the maximum width would start other fields wrapping as well.
I want to manual set column(head and body) size(width, height).
I tired to set style but not work and find all document not found about this.
DataGrid Component
DataGrid set width size not work
Setting the column width:
<clr-dg-column [style.width.px]=“200”>my column</clr-dg-column>
This will also set width for all column cells.
To control height and width you can either put the datagrid inside a container with a set height/width.
After i tired use set style on template(html)
my column
I have other problem when use follow Server Driven(https://clarity.design/documentation/datagrid/server-driven)
When next pagging each column length adjusted according to data i found overlap column
Data overlap column
and when binding long length data i found header separate column incorrect
header wrong separate column
My solution i think i have to loop for looking longest length and setting style width and writing logic in to typescript.
Have any solution easy way please suggest me.
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 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.