Strange rendering: difference between page load and resizing, bad labels, etc.
alejandroiglesias opened this issue · 9 comments
Hi, I'm trying to implement RRSSB on a website, but it renders quite strange. The thing that calls my attention the most is that it renders differently on page load and after resizing a few px. Seems that the window resize event calls another function that is not called on page load. Besides that, it looks quite different than the demo page, which is what I was expecting (all buttons on the same row and adapting to the width of the container). I loaded the CSS and JS files and put the HTML snippets on the page. I'm also using Bootstrap 3 for the layout.
On page load, before resizing.
After resizing a few px:
Notice:
- Weird behavior: initial render is quite different than after risizing.
- On page load, buttons are not on the same row.
- Label overflows button.
- No space between icon and label.
The JS isn't firing..
@dbox thanks for replying. I've added a log on the rrssbInit function and it is being called.
Jquery?
Using jQuery 2.1.4.
Can you post a stripped down version somewhere?
Sure, here is a barebones version of my HTML file.
Going to have to see the full thing posted somewhere. Actually can you hop in here:
https://gitter.im/kni-labs/rrssb
Going to start a chat room for people who need help with implementation / questions. Thnx!
@dbox just found out the issue, I was using an Angular <ng-include> tag for including the HTML template for the sharing buttons. Seems that it was loading it after the RRSSB JS.
Thanks and sorry for any hassle.
Glad you figured it out!