I'm trying to create a thumbnail grid with Singularity 1.x. Here's the code:
$cols: 3
$grids: $cols
$gutters: 0.2
.element
#for $i from 1 through $cols
&:nth-child(#{$cols}n+#{$i})
+grid-span(1,$i, $output-style: 'float')
The problem is that the second element (the one that receives grid-span(1,2)) lacks gutter (margin-right).
Screenshots:
http://d.pr/i/Xsb7+
http://d.pr/i/ZcMg+
I tried changing the number of columns $cols, and the result is the same: all elements receive correct margin, except for the second one.
How do make second element have correct margin just like the others?
This appears to be an oversight in the Float output method. This will be fixed in 1.0.5
Related
How to create with Java a table with three rows as follows:
First row has one cell 100% entire table width
Second row has first from the left cell width 50mm, and second 20mm and third 30mm which in total is 100% of table width
Third row has first from the left cell width 30mm, and second 50mm and third 10mm which in total is 90% of table width
How would the code from the iText look like?
So you want to use iText to create a table that looks like this:
The PDF in the screen shot was created using the TableMeasurements example. The resulting PDF can also be downloaded for inspection: table_measurements.pdf
The first thing that jumps to the eye when looking at this screen shot is the fact that the table doesn't look "complete". This means that we will have to complete the table the way I already explained on SO yesterday (and many times before that): Why the 2nd row of table won't be written? (which was actually a duplicate of How to generate pdf if our column less than the declared table column and ItextSharp, number of Cells not dividable by the length of the row and Odd Numbered Cell Not Added To Pdf and PdfTable: last cell is not visible and ...)
In the comment section, I was asked:
How can I complete row with cells with no border?
I answered:
Use table.getDefaultCell().setBorder(Rectangle.NO_BORDER);
Note that PdfPCell.NO_BORDER also works as PdfPCell extends the Rectangle class.
In your case, we'd have something like this:
public void createPdf(String dest) throws IOException, DocumentException {
Document document = new Document();
PdfWriter.getInstance(document, new FileOutputStream(dest));
document.open();
PdfPTable table = new PdfPTable(10);
table.setTotalWidth(Utilities.millimetersToPoints(100));
table.setLockedWidth(true);
table.getDefaultCell().setBorder(PdfPCell.NO_BORDER);
table.addCell(getCell(10));
table.addCell(getCell(5));
table.addCell(getCell(3));
table.addCell(getCell(2));
table.addCell(getCell(3));
table.addCell(getCell(5));
table.addCell(getCell(1));
table.completeRow();
document.add(table);
document.close();
}
To make the example more realistic, I created a table with an exact width of 100 mm. For the width to be acknowledged, I lock the width. As already explained, I make sure that default cells have no border. After adding all the cells with the different widths (10 cm, 5 cm, 3 cm, 2 cm, 3 cm, 5 cm, 1 cm), I complete the row.
What does the getCell() method look like, you might wonder. This was already answered by Amedee in the comments (which for some reason you ignored):
private PdfPCell getCell(int cm) {
PdfPCell cell = new PdfPCell();
cell.setColspan(cm);
cell.setUseAscender(true);
cell.setUseDescender(true);
Paragraph p = new Paragraph(
String.format("%smm", 10 * cm),
new Font(Font.FontFamily.HELVETICA, 8));
p.setAlignment(Element.ALIGN_CENTER);
cell.addElement(p);
return cell;
}
We create a PdfPCell and we set the colspan to reflect the width in cm. I added some more fancy stuff. I didn't use any functionality in this example that isn't explained on the official web site or on StackOverflow.
For more rowspan and colspan examples, please take a look at the Colspan and rowspan section in the official documentation.
I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.
To get this working I added the following css
.k-grid table{
display: inline;
}
The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?
Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.
Make the grid sortable: false
and use this CSS
#gridId table {
width: auto;
}
But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.
var grid = $("#kendoGridName");
grid.width(400);
Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).
function resizeGrid(size) {
if (size === null || size === undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
var windowWidth = $(window).width();
windowHeight = windowHeight * size;
windowWidth = windowWidth * size;
$(".k-grid-content").height(windowHeight)
$(".k-grid).width(windowWidth);
}
so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.
so you could call this after your initialization of the grid and then scale the grid to an appropriate size.
by targeting the kendo css classes it makes this function easier to reuse.
if you need more info let me know.
Please look at this gist:
http://sassmeister.com/gist/6d575ec85663865fa567
There you can see a placehold.it thumbnail grid realized via float-span
What i need now is:
The padding-left of the first .item in each row should be 0
The padding-right of the last .item in each row should be 0
this would then end up in the thumbnail grid perfectly aligning with the rest of the content (e.g. the lorem ipsum text)
What is the beast way to achieve this with singularitygs?
UPD 2014-07-21
what i need can be seen in this screen:
i don't need another padding style, i need the padding from the first and last item in each row removed. this can't be done via css, because the sass calculations would be wrong.
UPD 2014-07-30
based on various sources, i managed to establish this mixin:
#mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){
#include layout($layout, $gutter: $thegutter) {
#for $i from 1 through $cols {
#if $i == 1 {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, left);
}
}
#else if $i < $cols {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, none);
}
}
#else {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, right);
}
}
}
}
}
which can be called e.g. via:
$layout: 1 1 1;
#include thegrid($layout, 3, $el: ".item");
an example can be seen here: http://sassmeister.com/gist/7a45960747ad3d4bbf56
Not sure what you mean.
You're applying gutters with an absolute value. This is what Singularity calls fixed gutters.
Singularity realizes fixed gutters by applying padding to grid elements.
Padding can be applied in two styles:
split: the gutter size is divided by two and the resulting value is applied as left and right padding to every grid item.
opposite: the value of gutter size is applied as right padding to every item except items occupying the last column.
So if you are unhappy with split gutters, switch to opposite gutters. That's the default behavior, so you can simply comment out #include add-gutter-style('split');.
If you are unhappy with either gutter style, well, you can manually remove padding that you don't need. This doesn't make a lot of sense because if you apply zero padding to items other than occupying the first and the last columns, you will distort your grid. And if you apply them only to the items occupying the first and the last columns, you basically get the same setup as with opposite gutter styles.
You might get better help if you make a pencil drawing of desired layout.
UPD 2014-07-21
OK, now it's clear what you mean.
So you basically want split gutters for the outer level and opposite gutters for the inner level. You're already using the layout() mixin required to override grid settings, so you could just tell it to override gutter styles, e. g.:
#mixin layout(2, $gutter-style: 'opposite') {
Unfortunately, due to the fact that Singularity creates fixed gutters via padding, they only play nice in split mode. In opposite mode fixed gutters produce uneven columns.
So you'll have to use relative gutters:
#mixin layout(2, 0.1, $gutter-style: 'opposite') {
There are a couple of things you have to keep in mind:
Spanning the last item in each row separately.
With the opposite gutter style, the last item in each row is special: it contains no right gutter. So you will have to tell Singularity which item is the last one in row.
To do this, we will use the :nth-child(Xn + Y) selector, where X is the number of items in the row and Y is the number of target item in the row. As we're targeting the last item, X and Y will be equal:
#include float-span(1);
&:nth-child(4n + 4) {
#include float-span(1, last);
}
Isolating media queries.
Once you do that for each breakpoint, you'll end up with styles applied to different items in different breakpoints. Those styles will not be overridden and thus will leak from smaller to larger breakpoints, breaking the layout.
You could override them manually, but that's a lot of thankless job. Instead, isolate your media queries so that styles don't leak:
$beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint: 800px;
// Mobile view (formerly without a media query)
#include breakpoint($beforeMediumBreakpoint) {
Demo: http://sassmeister.com/gist/dd9f1af025900d7e63db
PS A piece of advice from me: don't use fixed gutters and split mode. Use fluid gutters and the default opposite mode. This will save you from a lot of trouble! You can always simulate split gutters by applying padding to the outermost container.
You can do some math to calculate relative padding for the container that will be equal to the gutter between grid items! With the magic of math, you can even apply bottom margins to grid items equal to grid gutters, producing a beautiful uniform thumbnail grid.
I've created a nifty extension Singularity Quick Spanner that can reduce the amount of work you need to do to set up thumbnail grids. See it in action (note vertical gutters equal to horizontal gutters).
I have a grid set up of thumbnail images, currently 4 thumbs per row. To make sure they line up i have this snippet of code:
li:nth-child(5) { margin-left: 0;}
What I have tried to do is this but I am getting a syntax error:
$galleryGrid: 5;
li:nth-child($galleryGrid) { margin-left: 0;}
If I wanted to alter the nth-child to use another value, such as 10 (so I can have 8 thumbs in a row), I assumed this would work.
Is this not possible or am I just doing incorrectly?!
Thanks in advance for you help.
You need to use variable interpolation to allow nth-child to be a variable.
$galleryGrid: 5;
li:nth-child(#{$galleryGrid}) { margin-left: 0;}
Generates
li:nth-child(5){margin-left:0}
This markup is fine if you have absolute control over the images and layout to ensure that your elements always wrap in such a way that every 5th one begins a new row. If you cannot make such guarantees, setting negative margins on the parent element is a better way to go.
When I have a result set with several hundred columns, the header wraps back to the left side of the web page and takes up two rows. The correlation between header positions and column positions in the data also is not correct toward the end of the first line of header cells.
It appears that the width of the header is fixed to 10000px and the width of the row cells can be much wider and this is what is causing the rendering problem.
The style for slick-header-columns is set explicitly by slick.grid.js to: style="width: 10000px; left: -1000px".
When I inspect the css via firebug in this wrapping state, I see that the width of each slick-row is set to: 12805px. When I manually change the width of the slick-header-columns width to 15000px, the rendering is correct and the header no longer wraps.
Is there a way to programatically update the header width so that it can hold all of the column cells?
My solution to this problem was to modify the setCanvasWidth function in slick.grid.js so that it updates the header width as well as the canvas width:
function setCanvasWidth(width) {
$canvas.width(width);
if (width > $headers.width()) {
$headers.width(width + 1000);
}
viewportHasHScroll = (width > viewportW - scrollbarDimensions.width);
}