I am experimenting static layout with Susy and I need some directions on how to establish a nested grid with same gutter width. In this example below, I have .main that spans 9 columns out of 12 columns and I like to make its children .main-item to have a four column layout inside the 9 column layout by maintaining the same 18px gutter width.
http://sassmeister.com/gist/2a414c2b9dc6f332b89b
This of course works seamlessly in fluid grid because everything is in percentages, but in this experiment I want to try with static grid.
What is the best way to do this? Is "with-layout" mixin only the possible solution to achieve this by defining a new layout or are there any other ways to achieve this?
What I have tried so far:
1. Simply mentioning span(3 of 12) for .main-item knowing it wont work, but still gave it a shot
2. Defining a new layout and using with-layout mixin, but it threw me this error "Function valid-column-math finished without #return". I guess I would have done it wrong.
Appreciate your advise.
Re-defining the grid will take a lot of extra math, because you would have to calculate the new size of a column. Also, context doesn't matter, since the math is not relative to context. It seems to work if you just span fractional columns, though. You want to divide 9 columns into 4, so that would look something like:
.main-item {
#include span(9/4);
&.last{
#include last;
}
}
Related
Is there a way to have a list of elements always clear the row above them without putting CSS on individual li elements?
Situation: Im building a site that's using the Business Catalyst CMS. I have a list of products which are built using lists. It all works fine except when you move the screen in and one of the product headings goes over three lines it makes the row under jump and only show one or two products instead of three.
See sample:
http://sklzaustralia.businesscatalyst.com/baseball-softball
Move the screen in until there is a gap on one of the rows. This gap is what I'm trying to avoid.
The products are imported with a module so I can add css to individual list items. It needs to be a general or solution.
I also know if I add a height to the it will solve this but that makes the responsive aspect messy as I need to pick a height that works across all screen sizes. So if its right for large screen, the gap is too large for small screen layout.
An ideas on fixing this problem...?
I ran into the same issue with an ecommerce site where product titles ranged from 2 words to 6 or more, and also included a short description underneath the product image.
You need to evaluate the elements within the
<div class="shop-product-small clear">
...and unfortunately define heights and min-heights to make sure each product div is always the same height. Play with font-size as well at a smaller #media width.
Set the width for li to be 50% when it falls below a breakpoint (when the gap appears).
Or just add .col-xs-6 to your li if you are using bootstrap.
I'm new to "Susy" and am struggling with figuring out a few items.
I'm trying to create a row that has 3 fluid promo boxes (all gray in attached image) and 1 static box (which is a 300px x 250px big box ad - JPG file). I don't want to have the yellow box (ad) scale, but I do want the other 3 boxes to be fluid and maintain an equal margin to the right of the last gray box.
Currently as I start scaling the page the yellow box (image) drops down below the 3 fluid boxes. Is there any way for them to act as one row.
Thanks in advance
Yes. You need to start with two wrappers — one of the static block, and another around all three fluid blocks. Set a static width on one, and float it to the right. Don't float the flexible one, but give it a block formatting context with overflow: hidden. If that doesn't work for you (you need overflow for some reason), try adding a right margin the same size as your static sidebar (or slightly larger). Now the flexible wrapper can act as the context for your other elements. Something like this:
.ad {
#include span(last 1 of 4 static);
}
.flex-container {
#include post(1 of 4 static);
.item {
#include span(1 of 3);
}
}
See a demo on Sassmeister.
I'm just trying to familiarise myself with the new Susy Next options and I have my code:
.grid
+clearfix
clear: both
.grid__item
+gallery(1)
+rem(margin-bottom, 20px)
I want a 5 column grid inside .grid so that .grid__item's span 1 column in a gallery formation.
If I add +with-layout(5 1/4 fluid show background) inside .grid then I don't get the debug background output.
If I add +container(5 1/4 fluid show background) inside .grid then I get the background but the items don't span correctly as the context is not there.
Are there any docs on how to use +with-layout as I think that might solve it but can;t find anything on http://susydocs.oddbird.net/en/latest/install
I'm just after the best way to use Susy Next to solve this. I need .grid to contain 5 fluid columns with 1/4 gutters and to then allow me to span my .grid__item's based upon it. I also need to be able to output debug backgrounds on .grid.
I think my main issue is that I am getting confused between: +container, with-layout and how things roll in together. I have read the latest docs but it doesn;t quite click in my head.
Might just be me!
You need to establish your grid. with-layout is one way to do that for a small block of nested code, but why not just set them globally? There are several ways you could do it, all of them documented, but most likely you just want the layout() mixin:
// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)
Now you have a global context, and you can build your grid:
.grid
+container
.grid__item
+gallery(1)
That's it. If you really just want the grid set for a small section of code, you can use with-layout. It works just like layout, but it only affects the code nested inside it.
// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
.grid
+container
.grid__item
+gallery(1)
For sorting, I would like to show only one arrow aligned with the column header. I noticed that viewsortcols allows you to put the arrows horizontally (aligned nicely), but I was wondering if there were any tricks to just use a single arrow. If sorted one way it points up, the other way it points down.
I came across this grid that is doing it...but was having a little trouble understanding their code. I do not need to use custom arrows.
The code example which you reference uses very old version of jqGrid (version 3.4.3). So it can have another behavior of sorting.
One day I misunderstand one question and have answered on exactly your question. You find the answer here. It uses the demo which create the results
and
One more answer could be also interesting for you.
UPDATED: If you want to change position of the sort icon you can do this by adding the CSS like the follow
.ui-jqgrid .ui-jqgrid-labels .s-ico .ui-grid-ico-sort {
margin-top: 0px;
}
It will change the icon position to
and
See the modified demo.
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.