I'm using Isotope (http://isotope.metafizzy.co/) for a website. As you know Isotope creates a fluid grid of elements that can be filtered, sorted, clicked etc.
It appears that for some reason Isotope orders everything in a grid that in horizontal dimension is multiples of 120px wide, e.g. if I set my elements as 115px wide, then Isotope will ad a small 5px margin to the ride of each element. If my elements are 119px wide, it will ad 1px. If my elements are 121 px wide it will magically ad another full 119px.
Is there a reason for this? How do I change these 120 px to another value?
Thanks
You probably have columnWidth set to 120, as this is the default value in the examples.
Related
I am using v-selects inside a flexbox, and I would like the v-selects's size to depend on the flexbox settings instead of changing depending on whether a long or short item is selected.
Is there a way to make the width independent of the selected item?
Yesterday I remembered that it didn't happen when I used a v-container, so I mimicked the css of a v-container but with a few changes to apply a different style.
Essentially, if the v-select has rather low width, you can't get around setting the width of the v-select manually if you want it to stay a certain size, which in the end is what v-col is effectively doing.
I wanted it to change depending on the parent's width so I used a percentage and subtracted the total flexbox gap (20px) divided by the number of items (2) in the parent, like this:
.v-select-class {
width: calc(50% - 10px);
}
Hope this helps someone in the future.
i have a function where i manually set the width of a jqgrid column. If I after this want to use the resize handle, it adds or substracts relative from the original width size. So it doesn't see my new width to take as a base. I have tried putting the width and withOrg in the colModel without success.
I have a click handler inwhich i resize a column to a certain width on click. i set the width of the th trought JS. After this i would like to be able to use the .ui-jqgrid-resize element for resizing the column.
a short version of my code, say the th is 200px wide:
$('th').dblclick(function(){
$(this).width('100px');
});
after the user doubleclicked, and the th went smaller in size to 100px, the user uses the resize handle to widen the th 10px. The expected result is a th of 110px wide, but the thjumps to 210px wide. It adds the 10px the user wanted to add to the original state, not the state i have set with the doubleclick.
I would recommend you to use setColWidth method, from the plugin which I wrote before (see the answer), to change the width of the grid column. You can download the current version of the plugin from github.
If you trying to set the width of columns based on the width of the content of the column then I would recommend you to take a look at the demo created for the answer and read the answer too. I don't see the suggested code as final solution, but the demos shows my view on the problem and the ways to implement "autowidth" functionality.
I just discovered strange behaviour of Firefox.
If I have a table cell of 100px height, and add 20px padding to it - it's total height should become 140px.
All browsers act correctly, Firefox 8.0 ignores the padding:
http://jsfiddle.net/8wDde/
Anyone knowing a fix?
It seems the best cross browser solution may be to set the full height of the table row equal to height and padding of the cell:
tr {height: 140px;}
See: http://jsfiddle.net/8wDde/19/
that is a strange behave. add display:block; can fix the problem. tested in FF8.01 see:
http://jsfiddle.net/8wDde/1/
But I also do not know why?
I searched in https://developer.mozilla.org/en-US/search?q=table+padding, but did not find anything. May be you can also try to search in there.
UPDATE:
http://jsfiddle.net/8wDde/7/
add overflow:hidden to avoid the td change line.
I couldn't find any information about this on Google, so one way to fix it for Firefox would be to use a CSS hack.
#-moz-document url-prefix() {
td{
height:140px !important;
}
}
Obviously, if the height was 200px, then you'd change that to 240px to account for the missing 20px on top and on bottom.
That targets all Firefox versions, I'm not sure if theres a FF8 specific css hack.
You can see this demo here: http://jsfiddle.net/charlescarver/8wDde/2/
Edit: I like Giberno's answer more
This is a fuller description of a couple of comments I made on another question, hopefully a little bit clearer. Note that Opera has the same behaviour as Firefox.
In the diagram above, the total cell area is the dark box, and the text My Text is the content of the td, and it is that that defines the Cell Box (C).
Now, the CSS 2.1 spec says:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells. A 'height'
value of 'auto' for a 'table-row' means the row height used for layout
is MIN. MIN depends on cell box heights and cell box alignment (much
like the calculation of a line box height). ...
In CSS 2.1, the height of a cell box is the minimum height required by
the content. The table cell's 'height' property can influence the
height of the row (see above), but it does not increase the height of
the cell box.
So td { height:100px; } affects the Row Height (R) (it will be at least 100px high) but does not effect the Cell Box (C).
On the other hand, td { padding:20px; } applies to the Cell Box (C), so if the height of (C) + Top Padding + Bottom Padding is less than 100px, the row height is not affected and is still 100px.
If (C) + Top Padding + Bottom Padding is greater that 100px, the row height will expand to accommodate the full height of (C) + Top Padding + Bottom Padding.
Then td { background-color:blue } applies to the full row height (R) and cell width.
You can see this in action at http://jsfiddle.net/Ez7xz/
The final confusing factor is the value of the computed height of the td in Firebug. What seems to be happening here is that it is assuming that the height is the result of content-box box sizing, and reporting the value of R less the top and bottom padding. While this seems odd, it's not obvious what other value it could reasonably report.
I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?
When constructing your options, you can use forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
This will make the columns fill the entire width of your grid div.
The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.
I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.
The measurement algorithm is your big decision. You may put the content off screen and measure it, as #jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.
After you get the sizes of the columns, you assign them to your columns using grid.setColumns().
Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.
Here is the link I have created a plugin to handle slickgrid auto size
https://github.com/naresh-n/slickgrid-column-data-autosize
I added this after the grid is drawn and it works fine.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
You should be able to call the autosizeColumns() method of the grid object.
grid.autosizeColumns();
Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:
Add $container.ready(resizeAllColumns); to the init function.
This ensures the columns autoresize on initial load
Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.
I'm having hard time with tables and column widths.
Update: I'm using XHTML Strict 1.0.
The page is: http://www.pro-turk.net/try
The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.
According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?
The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.
You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.
If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.
For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.