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.
Related
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.
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 table containing many rows. I can allow a change in row height to fill the contents, but I want to keep my cell width fixed. Setting a max-width to cell solves the problem, but the content over flows to the next cell.. Can anybody have a solution in html/css or something else?
In addition to max-width, set overflow: hidden;. See http://jsfiddle.net/andyedinborough/nq7rA/1/
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.
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?