I'm trying to integrate Polymer components into my Rails 4 app that is already integrated with zurb foundation 5.
I have followed the instructions for the polymer-rails && polymer-paper-rails gems and included require paper-button/paper-button into my application.html.erb
My buttons.haml file looks like this:
%paper-button= "Flat Button"
What is however displayed on the ui,is Flat Button plain text and not a Polymer Flat Button.
Am I doing something wrong or is there a known issue with these Gems(Polymer and Foundation) not functioning well together?
UPDATE:
After a long struggle, I have managed to get this GEM to run without any notice/error in the Google Chrome Console. Firefox is still not happy however. It does seem to be a different issue now, since I've added platform.js into the pre-compiler. After adding platform.js to the pre-compiler, components have disappeared from the UI completely (As if no component code exists), and this only happens in Firefox.
See below a screenshot of Firebug:
Thanks.
Related
I started creating an ASP.NET (4.5.1) MVC project in VS2019 by following a tutorial. It is quite straight forward creating the HomeController and an Index View file. Files have not been changed so far. After compiling and opening in IE and FF I do not see the grey bar at the very top compared to the displayed one in the video tutorial. Instead, there is just a very small icon left to the "Application name" hyperlink but there should be a grey bar (div-element) wrapping "Application name" hyperlink and stretch from the very left to the very right.
Screenshot how it looks on my device and web browsers.
Screenshot how it should look like based on the video tutorial
It is for sure not critical at this stage but really wondering.
Does somebody know what is maybe missing / misconfigured?
I already searched web but there are thousands of other results being displayed.
Thanks
Best regards
I believe I found the issue. Bootstrap has not been installed as NuGet package. Therefore, I guess bootstrap 4 or 5 are used by default since bootstrap 3 is not supported anymore. By manually installing bootstrap 3 NuGet package, it perfectly works as expected. By updating to version 4 and 5, it breaks.
I am trying to click an link with twitter bootstrap label class in capybara test, however, the element is not displayed. After I remove the label class, the element is displayed and clickable.
This observation is based on using capybara's screenshot_and_open_image method when debugging the problem. Any idea for this strange behaviour?
(The page is rendered correctly in major browsers.)
PhantomJS 1.9.8 implements a pretty old browser (Safari 5ish IIRC) so it could be some kind of css issue - 2.0.0 is a much more feature complete modern browser, but has issues with file upload -- 2.0.1 (unreleased as of now) fixes the file upload issues - Try using PhantomJS 2.0.0+
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
Bootstrap is a very cool, but for some reason all icons (and icons inside buttons) are not serving up at all in IE 7 & 8.
All that is coming up is a square symbol.
I can live with non-rounded boxes in IE, but the icons are kind of a must. Any ideas?
(if it makes any difference, we're running rails as the platform with the twitter-bootstrap-rails gem.
Thanks!
Make sure you have declared the doctype in your HTML.
<!doctype html>
I assume the icons are correctly served on other web browser and you are using 2.0.4.
You can try to clear the ie cache.
Or maybe http://fortawesome.github.com/Font-Awesome/ (ie7 is supported)
There's a list of issue specific to ie on GitHub : https://github.com/twitter/bootstrap/issues?labels=ie&page=1&state=closed
But don't see any related to your problem.
If none of the answer make sense to you, post some code (jsFiddle would be ideal but since the picture is expected to be in /img it will not works without editing bootstrap.css)
I'm trying to integrate SlickGrid in my Rails 3 application.
I use the latest Firefox on Windows XP.
Everything was fine until I added the column picker according to this example.
Now, when I right click one of the header cells, I do see the column picker. But, when I click one of the check boxes, Firefox hangs.
Any ideas what could be the problem, or how to debug this ?
UPDATE
I noticed that if I remove the width parameter from all columns, everything works fine!
If you plug SlickGrid into static html not served by rails, does it still not work?
I suspect that this isn't an issue with Rails, unless the javascript isn't being loaded into your page.
Which version of firefox are you using?