I am using Compass Columns in a Drupal framework to create a grid for my content, with 5 columns in each row. However any content beyond the first five columns/listed items do not display at all, so I only have one row of columns showing even though I have 16+ listed items.
My code:
.product-item-list {
ul {
padding: 0;
#include column-count(5);
}
li {
list-style-type: none;
margin-bottom: 2em;
#include column-break(before, always);
}
}
Has anyone else come across this issue? Help would be much appreciated, thanks.
Remove the #include column-break(before, always); and add add display-inline to the first div inside the li
Related
I cant find any related solution to my problem here on stack over flow but here we go. i have checked footer space and marked related module with zero spacing for slide but still it is not working.
Please see www.sateeni.com and under main homepage slider i have some unwanted space and don't know why its there. Please need help to find out why and where the problem is. sorry if its very basic thing but i am new to magento so cant figure out the reason. I have tried all options but no luck.
Thanks in advance.
Adam
Your main content container is showing and even though it is empty, the CSS has padding and a minimum height:
.main {
padding: 20px 0;
min-height: 370px;
}
You can either use CSS to overwrite this min-height on the homepage only
.container.full-width {
padding: 0;
min-height: 0;
}
or just hide this element on the homepage only.
.container.full-width {
display: none;
}
I am trying to do a Singularity layout with a main container and a sidebar. In the main container I'd like to have a list of floated elements that will get line breaks at each 3.
Here's the relevant gist:
http://sassbin.beta.caliper.pl/gist/8704970/
Unfortunately width(1) + width(2) + width(3) != width(main). What am I doing wrong? I have to use the grid for items 1..N, because they need to align elements in the page's header (not included in the gist).
So after approaching the topic with a fresh mind I managed to get the expected positioning.
Here's a new gist for everyone to compare:
http://sassbin.beta.caliper.pl/gist/8900975/
There where a few things that needed changing:
Add body { margin: 0 } to align the #include background-grid() visualizations with the act.
Remove all borders and replace them with backgrounds to get rid of 1px differences.
Change grid inside item container with #include layout() to match the container's grid-span.
Style items with nth-child and #include float-span().
Specify last for the last item in a row to avoid unexpected line breaks.
The crucial part of the code is:
#main {
#include grid-span(9,1);
background: yellow;
#include layout(9) {
.item {
&:nth-child(3n+2) {
#include float-span(3,1);
background: blue;
}
&:nth-child(3n+0) {
#include float-span(3,1);
background: red;
}
&:nth-child(3n+1) {
#include float-span(3,last);
background: green;
}
}
}
}
I have implemented KendoUI in my WebApp, is there any way of making the grid responsive?
Like, showing fewer columns on smaller resolutions!
Here's my bootstrap-styled Kendo UI grid BEFORE applying the following styles
And here's what you get afterwards. May not be perfect, or what some will consider 'responsive' enough. But, for my users, this works a treat. Phone isn't our target platform anyways, but, now we can at least see what's in the grid, even if we cannot sort it.. etc.
And here are the styles inspired by #Vel's codepen, from earlier in this thread.
His codepen styles are missing a statemetn to hide the colgroup element.. which is integral for this approach.
Be sure to put this CSS in your page flow somewhere AFTER the main kendo CSS file
#media screen and (max-width: 800px) {
.k-widget table {
border: 0;
}
.k-widget table thead, table colgroup {
display: none;
}
.k-widget table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
border-radius: 20px;
}
.k-widget table tr td:last-child {
background-color: #313444;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
background-color: #313444;
color: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
padding-top:1em;
}
.k-widget table td {
display: block;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
There is now a minScreenWidth setting for each column, which hides the column when the browser width is less than the specified. In our application we have set some constants corresponding to the Bootstrap media query breakpoints, so instead of manually specifying the width every time, we use these constants and thus some columns are hidden when you are below e.g. the Bootstrap sm or xs breakpoints.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth
Yes. using the below link you can acheive the kenod grid responsive design.
http://codepen.io/anon/pen/QwPVNW
In media query please use like this
#media screen and (max-width: 600px) {
.k-grid-content > table {
}
}
I am afraid the Grid currently does not provide you with such responsive design.
I have this working in a bootstrap site via jQuery. Here's how I hid the 3rd and 4th (index 2 and 3) columns when the browser is narrow (under 768 px).
dataBound: function () {
$("#contacts tr > td:nth-child(2)").addClass("hidden-xs");
$("#contacts tr > td:nth-child(3)").addClass("hidden-xs");
$("#contacts thead th:nth-child(2)").addClass("hidden-xs");
$("#contacts thead th:nth-child(3)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(2)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(3)").addClass("hidden-xs");
}
Unfortunately this creates an index dependency, so you can't shuffle your columns around without updating these rules.
I have written a JQuery based widget with can be used to make a Kendo Ui Grid responsive.
You can get the widget here: https://github.com/loanburger/ResponsiveKendoGrid
Usage: After creating your grid add the following code:
$('#GridId').responsiveGrid(
{ columnsToShow: ['date','name','surname'], columns you want to show in responsive view
mobileWidth: 860, // screen width to trigger the change
idColumn: 'Id', //ID column
tools: ['excel'] // if you have the excel export option or blank if not
});
What it does is is basically only keeps the first column and hides the other columns but changing the client template used. It then created a items using the columns you specified and stacks then top down.
This works for me in most cases where I am just displaying data but not for inline editing or inline custom controls - that's coming later..
Yes., you can do it by setting width for Grid columns.
if you set columns width, kendo will automatically enable horizontal scrolling for smaller resolutions.
<div class="grid">
<header>header</header>
<div>main</div>
<footer>footer</footer>
</div>
I defined three grids for three screensizes. The markup contains three elements which get displayed in a different column for each screensize.
mobile layout, the main div stays in first column, header and footer get displayed in 2nd column
tablet layout, all three elements get overlapped in 2nd column (because margin-right: -100%;), seems to be a bug.
desktop layout, the only layout which works, header/footer/main get displayed in fifth column
The grid definition:
// grid columns
$grids : 2;
$grids : add-grid(6 at 40em);
$grids : add-grid(12 at 50em);
// grid gutters
$gutters : .2;
The styles:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.grid {
#include background-grid;
margin: 0 auto;
max-width: 1080px;
min-height: 100%;
}
.layout {
// mobile layout
#include grid-span(1,2);
// tablet layout
#include breakpoint(40em){
#include grid-span(4,2);
}
// desktop layout
#include breakpoint(50em){
#include grid-span(8,5);
}
}
header,
.grid div,
footer {
#extend .layout;
}
Does somebody know why this happens?
Singularity needs to know the location of each column. The second value in grid-span is the location which you have set to 2 and 5 forcing columns to start in these locations. You can change that value to 1 if you want things to be placed in the first column.
It also sounds like you are used to floating columns across a page so the one before it effects where the following column is placed. By default Singularity uses a technique called isolation. You can switch to the more traditional float method by writing $output: float. Documentation for these output styles can be found here: https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float
I am using semantic.gs to create a grid for a webpage. I noticed that whatever I do, I never have any "gutter", meaning in CSS the margin is calculated to 0, despite leaving the default to 20px.
So I took a step back and tried to reproduce this very simple official example:
http://semantic.gs/examples/fixed/fixed.html
The output of my attempt is here:
http://jsfiddle.net/QXpcq/
As you can see, again there is no gutter. The markup is the same, the output CSS is not. My output CSS always shows a margin of 0. You would think this is perhaps due to my input being different from the example, but as far as I can see, it's not. I'm using SCSS, as follow:
#import 'compass';
#import 'grid';
// Specify the number of columns and set column and gutter widths
$columns: 12;
$column-width: 60;
$gutter-width: 20;
// Uncomment the definition below for a percentage-based layout
// $total-width: 100%;
////////////
// LAYOUT //
////////////
// center the contents
div.center {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
// header
header#top {
#include column(12);
margin-bottom: 1em;
}
// main and sidebar
#maincolumn {
#include column(9);
}
#sidebar {
#include column(3);
}
I have snipped the reset CSS code and the CSS that styles the colors and such in the demo. Trust me, they are an exact copy and paste of the official demo as you can see in the fiddle.
The "grid" import is the official download of the grid mixins. I didn't change it. The big mystery here is why with the same markup and SCSS I get different results?
Could it be due to my compilation process? I'm using the Scout app to monitor my SCSS folder. It picks up any change to it and compiles it to CSS.