I'm using a forked version of David Desandro's jQuery Masonry plug-in which allows me to set a width for the Columns.
spacerWidth: 10,
http://github.com/gilmoreorless/masonry
But how can you set a bottom margin on the element to give it equal spacing to it's column?
Thank You
I believe you can give a CSS margin-bottom to each of the bricks.
Related
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'm using Kendo grid in my application. When I try to resize a column in IE, all the other columns in the table disappear.
This does not happen in Firefox or Chrome, just IE 9 and 10.
Can someone please help on this as I'm breaking my head over this issue from a day?
The issue is with mixing percentages and px for your column width.
One solution is to make sure you assign a specific width to EVERY column in your grid (120px).
Do NOT use percentages, unless your parent has a specific width (not 100%, but 800px or something like that).
There is a good chance this is to do with IE not inheriting CSS properties the same way as the other browsers. The Kendo widget will be output in its own div (check the kendo CSS, might be something like k-container or k-widget), so look at its CSS and that of any parent divs and you might have some luck.
I'm deeply customizing the appearance of a jqGrid with subgrid.
One thing I had to do is to change the Expand/Collapse buttons which is supported by the configuration option, no problem.
The thing is that the width of the column where the Expand/Collapse buttons are is the same size of the images and I want to increase its width.
I tried to "hack" the CSS but I couldn't find a nice way of doing it.
So, is there a way to consistently set the Expand/Collapse column width?
Thanks!
I'll just place my way of doing it.
.jqGridWrapper .ui-sgcollapsed .ui-icon { margin: 8px; }
.jqGridWrapper is a class applied to a div that wraps the grid elements.
I use this to make sure my css customizations will only affect what's inside that div.
Cheers!
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'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.