No change on window resize. #54

Closed
Tolrem opened this Issue Feb 13, 2014 · 23 comments

Projects

None yet
@Tolrem
Tolrem commented Feb 13, 2014

Hi, I'm not a javascript specialist, I'm just a designer who uses cool scripts like this one :)

My problem here is that the columns don't recalculate when media queries breakpoints are reached on window resize, I have to reload the page to see the change. I don't know what I should do.

@lizsterine

I'm having a similar issue. It sizes down ok, but when sizing back up, it doesn't re-calculate until I reach my largest media query point.

@rnmp
Owner
rnmp commented Feb 14, 2014

Hey guys. The only reason I can think of is that you might not be using media queries the way Salvattore need them to be. If you take a look at the website, each media selector requires very precise min-width and max-width values. Let me quote that segment accordingly.

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #grid[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}
@media screen and (min-width: 769px) {
    #grid[data-columns]::before {
        content: '3 .column.size-1of3';
    }
}

/* Again, you're free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }

I know it's a lil bit annoying but it makes the script process things faster and let you work with CSS your own way (besides this restriction).

Now, if you’re already using that format and it still doesn't work properly, please feel free to post a live example somewhere in the web where I can inspect.

Thank you,
R

@lizsterine

Ahh, yep, that was it for me. Thanks!

@lizsterine

@Tolrem I also found if you don't run it in a server environment it won't work. I tried just running my file from my local disk and I wasn't getting real-time resizing, but when running the same files on my local server, it works.

@rnmp
Owner
rnmp commented Feb 17, 2014

Great! @Tolrem let me know if that fixed it for you as well. I also just updated the website’s documentation to make this clearer. http://salvattore.com/

@rnmp rnmp closed this Feb 17, 2014
@rnmp rnmp reopened this Feb 17, 2014
@lizsterine

@rnmp Just did a bit of digging, the issue is Chrome. It seems that line 145 "cssRules = stylesheet.sheet.cssRules || stylesheet.sheet.rules;" will return null when viewing locally in Chrome. Locally in Firefox it works - silly me for not cross-browser testing earlier.

After a bit of googling it seems there have been several bugs logged for Chrome regarding the stylesheet object on local disk. Eg: https://code.google.com/p/chromium/issues/detail?id=49001

Maybe another update for your doc might be needed? :)

@Tolrem
Tolrem commented Feb 18, 2014

Weird, I even tried by just copying the example css, and it still doesn't work on resize. I tried running it on a local server and no chance either.
I've found another pluging that does what I needed, but I wish you good luck for salvatorre, it's good :)

@rnmp
Owner
rnmp commented Feb 18, 2014

Thank you! Maybe for future improvements you can upload your code online so I can see what the problem is. Otherwise, good luck with your project as well.

@rnmp rnmp closed this Feb 18, 2014
@Tolrem
Tolrem commented Feb 18, 2014

As soon as I'm done with my current project I'll try your plugin again and see if I can make it work and where the problem was :)

@piercers

After trying the recommendations on this thread, I was still not able to get the layout to change on window resize. Checking through some other issues lead to this about @imports and, after removing all @imports from my stylesheets, the resize worked.

Hopefully there will be a way around this without having to abandon using imports.

@rnmp
Owner
rnmp commented Feb 23, 2014

We will find a way to allow @import eventually. Though using @import is not really advisable.

What I will do in the meantime is to include this information on the website.

@veteze
veteze commented Apr 4, 2014

this should be pointed out in the documents maybe. that this won't work:

#grid[data-columns]::before {
    content: '3 .column.size-1of3';
}

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #grid[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}

well it "works" but you'll run into the resize issue.

@michaeltrilford

Seems like it doesn't play nice with Sass either, as it doesn't reshuffle content as browser resized, only on refresh.

@media screen and (max-width: 849px) {
  /* line 4, ../sass/_salvattore.sass */
  #section-content .grid-9 .view-content[data-columns]::before {
    content: "1 .column.size-1of1";
  }
}
@media screen and (min-width: 850px) {
  /* line 4, ../sass/_salvattore.sass */
  #section-content .grid-9 .view-content[data-columns]::before {
    content: "3 .column.size-1of3";
  }
}
@Dzoge
Dzoge commented Sep 24, 2015

I just noticed that reponsive grid is not working when I open the HTML file from my local disk and I have to refresh in order to view responsive views.
But when I copy the files over to the webserver and open the same HTML file from there, it works and follows the browser window resize...

Though, no errors are logged in the console when I open it locally.

@pudgereyem

What I found is using ::after without using [data-columns], in your css – it wont work.

So this will work:

@media screen and (min-width: 769px) {
  .grid[data-columns]::before {
    content: '3 .column.size-1of3';
  }
}

But not this:

@media screen and (min-width: 769px) {
  &::before {
    content: '3 .column.size-1of3';
  }
}
@michaeltrilford

That's interesting @pudgereyem

@Dzoge Yeh that is correct, you just have to remember that on the local, it only seems to work on refresh.

Every time I got to use Salvattore, I rediscover this. Mind of a sieve.

@ymdahi
ymdahi commented Oct 19, 2015

Running into this issue now - any help would be greatly appreciated: http://gcn.fcad.ryerson.ca

The data-columns attribute is not being updated on window resize. I've tried changing the css to match the example on the site, but that didn't work.

My css seems to work fine in this codepen, so it must be something else conflicting with the js?

Thanks in advance for your help.

@Stolzenhain

What I found is […] without using [data-columns], in your css – it wont work.

… confirming as well – thanks for the hint; maybe this should have been noted better in the doc*. You can still use & placeholders BTW, only also crediting the attribute like this:

@media screen and (min-width: 769px) {
  &[data-placeholder]:before {
    content: '3 .column.size-1of3';
  }
}

* ok, I guess you could't expect more than the note already existing:

with the [data-columns] attribute selector included, Salvattore relies on this

@michaeltrilford

I can't remember fully, but the JS calls data-columns to generate the additional markup?

Just copy and paste that HTML structure they provide, and everything should just work.

@Stolzenhain

Yep, I got it to work. Depending on your project your content needs to rely on additional markup though and it's nice to be able to iterate this via SASS. But everything's cool as long a s you include data-columns.

@aslanoglou

i have the same problem, i did everything you say but i still have the problem
http://clientarea.spocstudio.com/@attiko_parko/elephants/asian_culture_en.html

@Stolzenhain

@aslanoglou: I suppose it's your default.css code in line 93, where you define the :before content outside of a media query, overriding the max/min settings – as @veteze notes, this doesn't work.

I can't change the code on your site to verify this, though.

@naeemsaleem

Hey guys, having the same problem here, the columns are not changing unless i reload the page - I'd appreciate any insight that can be given!

http://bowclub.co/en/shop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment