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.
Related
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.
I'm using Visual Studio 2013 RC to create a new ASP.NET MVC project. Running the sample generated by the template works as expected. When I update bootsrap to the latest version (3) and rerun the application, my navigation bar is not rendering correctly. It's basically collapsed with just the "Application Name" link and icon in the upper left corner. If I click on it, then the menu appears, but only vertically. Something clearly wrong. Anyone else seeing this behavior?
The structure of many items - including the navbar - has changed from Bootstrap 2 to 3. If you just start applying the v3 CSS to the v2 code, things are bound to go heywire.
I would start with checking out the Bootstrap 3 docs for the navbar (http://getbootstrap.com/components/#navbar) and update your HTML accordingly. Then see if you are still having an issue.
Thanks everyone for the feedback/discussion. This was indeed helpful. For the benefit of the discussion, I found this post to be spot on in getting my MVC project updated to Bootstrap 3. This is only temporary though. Once VS RTM's, this shouldn't be an issue.
I'm in the process of upgrading an old codebase containing jquery v1.2.7 to the v1.2.9. The corresponding UI upgrade is from v.1.6b to v1.9.2 (1.10 doesn't work with IE6). There are a bunch of ui plugins that are atleast 6 yrs old, and most of their authors no longer actively support them.
I took a layered approach of performing this. I first upgraded all the core files (jquery, jqueryUI), then upgraded inhouse js code (attr, $.browser) and such. Then I monkey-patched some of the plugins that had attr and browser. I've managed to work through all the bugs and errors so far. I now have a "clean" build, with a lot of the ajax functionality working as well.
BUT, I'm facing a pretty sticky issue with the facebox.js (yup THAT relic) plugin. I don't see any errors (js, network, or others) in the debuggers (IE8,FB,Chrome), but the facebox dialog displays incorrectly. It still displays the content inside it, but it is transparent and the background and edges do no show. I checked all my css as well as validated using w3c validator. Due to an NDA, I can't post the markup here. I realize that without the markup, even the considerable expertise here might not be able to give a complete solution. Could someone atleast give me some pointers on what I could be overlooking, or things to look for? TIA
eastwood
As you said, without markup it's difficult to figure out what's going on there, and my answer might be really stupid - but since you don't get any errors in the debug consoles and the box is transparent - is it possible that the images are missing/incorrectly referenced in the CSS?
Not sure how this old facebook.js plugin works, but I've seen one some time ago that used images for backwards compatibility with IE6 (for alpha transparency/rounded borders) - but not always. I think for modern browsers it drew that stuff itself. (pretty much like Facebook did it itself on its site)
So perhaps the error is related to JavaScript expecting images/etc. to be handled by CSS, but the CSS uses an only-IE6-hack?
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?