I have an ExtJS 4 web app and I have a grid with a set height. The problem I have right now is that the grid has to be a certain height, and the rows often aren't many enough (usually around 31 records) to occupy the entire height of the grid so there is space left below the grid:
What I want to do is to adjust the row height or something in the grid in such a way that the rows will equally distribute the available grid height amongst themselves.
Is there an easy way to do this? I have styled my grid but it's just for borders and for removing the padding in the row items.
You can modify it using css setting x-grid-table height property to 100%
like this
.my-table .x-grid-table { height: 100%; }
You can find a working example here. Hope it helps to solve your problem.
Related
Good morning,
for purpose of sizing problem and element's positions on the screen between several devices, I want to display a grid as background (like a chess Grid) like this pic, for after that, displaying items like Text and Images on it.
The problem, is that the grid must be dynamical for each differents screen devices (like flex:1). That s why I don t want to use an image. Any idea about how to do it using code ? :/
I think I understand the problem and I'll explain how I would do this.
Firstly I would be using grid: https://css-tricks.com/snippets/css/complete-guide-grid/ if you aren't familiar.
I would set the parent's width and height to be dynamic and depend on the device.
Then set parent to display:grid; grid-template-rows:repeat(#,1fr) and grid-template-columns:repeat(#,1fr) where # is number of rows or columns. The fr unit basically evenly splits the available space between all of the columns/rows it needs to make. Put simply, 100px wide parent with 2 divs each with 1fr means both divs get 50px.
Put the right amount of children divs in the parent, it should auto fill the grid for you, if not then you would have to go through and put a grid-area:rowNum/colNum/span 1/span 1; on them.
Id give all divs in a row a class and then do .rowOne:nth-child(even) to style with chess pattern, so white and black.
If you needed to select a particular tile do .rowOne:nth-child(tilenumber) and go for your life.
Let me know if this helped or I did not understand the question at all :)
There is a library called [react-native-bgimage][1] which allows you to create a tiled background image, so I think this could help you do the trick. If you provide an image of 100x100 pixels with 10px tiles, I would assume the library would repeat that image for you.
Disclaimer: I have not yet tested this out!
I'm trying to leverage the css 'column-count' in combination with CSS padding, and and I'm observing that if I specify a column count of 3, the browser renders part of a fourth column if content doesn't fit. as shown below
Here is a JSFidle -> https://jsfiddle.net/w40jcykp/1/
I'm seeing this in Chrome & Edge. is this a known issue, or is there a workaround for this?
Thank you kindly.
The CSS below.
.newspaper {
column-count: 3;
min-height:144px;
height:144px;
padding:20px;
column-gap:10px;
border: 1px solid black;
overflow:hidden;
}
I think the issue here is that you've set a fixed height on your container. With the fixed height, the columns can't grow, so the rendering engine keeps making more columns to fit your content inside the container.
If you turn off overflow: hidden in your fiddle, you'll see that there actually a bunch more columns overflowing out of the side of your box. The padding just allows part of one of them to be visible.
The root cause here is height balancing. From MDN:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Since you've set the height, height balancing says that the browser will fix columns to that height, and will create as many columns as it needs to display your content.
You'll need to remove your fixed height if you want your columns to grow and flow correctly and obey your column-count property.
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
I have a code as displayed in here : http://jsfiddle.net/db4XL/
The table-layout:fixed seems to divide the child elements into two 50% width.
Is there any posible way to make the div.number width is auto?
Please look at this image for what I want to achieve :
Thanks
This is not possible. If you want the table cells to resize to the content so the left cell is splitted at approx 30% then you'll have to use percentages. Here's a working jfiddle:
http://jsfiddle.net/db4XL/7/
What you are asking for just isn't possible. The standard behaviour for tables using the auto property on all cells is to divide it equally.
How do i set the table under the images to be the same width as the image above? Thanks for your help!
http://cran-web.com/letaky/generate/10
EDIT: I was talking about "tab_cena", not "tab_objednavky". Sorry for misunderstanding.
Set the width of your table (#tab_objednavky) to 100%.
Currently your style shows that you have the width of your table set to 160%.
(Nazdar!)
There are only 2 kinds of measurements you can give the table: a fixed width like 1000px, or a percentage like 100%. If you give a fixed width, then you have to know the width of the items above (4 cells, 249px each). If you give a percentage, then it depends on the size of the element that contains your table.
You can use a percentage to your advantage. Since your table is in a 249px cell and you want it to stretch across 4 cells, try setting the width to 400%. It's a little bit of a hack because you're breaking out of the cell container, but it should work.
A better way would be to make the .cell equal 249px x 4 (996px), and just make the #tab_objednavky table inside it 100% width.
Edit: to answer your question based on the title of your post: you can't do that without using JavaScript to set the size of the container div.
Not sure I am fully understanding, but #tab_objednavky style you have width: 160%. Just set that to width: 100% and it will fill the .cell container.
Looking at your layout it looks like the width of the image containers is set by the class .cell_1, so just add it to your table and you should set. (Actually you should replace the existing cell class that is already applied to it.)
Why don't you just place the image as the first row of the table?