I have a weird problem.
If I reference bootstrap css file from local host, this
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-inbox"></span>
is rendered like this
but if I reference https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css
is rendered correctly, like this
This makes no sense. The files are identical. I refreshed the cache as well (Ctrl+F5).
Anyone knows on top of their head what this could be?
Related
I upgraded from Fontawesome 3 to Fontawesome 5.
Now I got several problems. If I am just linking the font-awesome.min.css in the head, the icons are not loading. I just see squares.
If I link the all.css and tha all.js in the head, I works. So the icons are shown correctly. But everytime, I am clicking any Button and the page is realoding, it takes around half a second to reload the icons. In the previous Version it worked without the js and the icons weren't reloading at all.
I am not sure why it is behaving like this. Maybe because all the <i ...> are converted into svg?
Do you have any hints what I can do?
The class names changed.
In FontAwesome 3:
<i class="icon-thumbs-up"></i>
In FontAwesome 5:
<i class="fas fa-thumbs-up"></i>
You should look them up here and change them manually.
Security made me upgrade jQuery from 3.2.1 to 3.6.0 and bootstrap from 3.3.7 to 5.0.1 using NuGet, and to get rid of old hand-installed jQuery/bootstrap files, and now I am having some layout problems that I cannot fix.
Symptom 1
Here I got a visible button "Toggle navigation". Before, this button was invisible. The info I found on css class sr-only said that it should make invisible on a screen reader (reading screen content to a blind computer user), but I don't have a screen reader but a firefox/chrome browser. I would guess this class should show for Screen Reader Only. In any case, this button does nothing so I commented it out.
<nav>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button -->
<a href="/" class="pull-left">
<img src="/Images/company_logo.png" />
</a>
<span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
Page Title
</span>
</div>
Strange still that the Chrome dev tools, under Elements, Styles, show that sr-only was handled by bootstrap.min.css, but with the new Bootstrap5 by _reboot.scss . The underscore suggests that this is a temp file, and the extension that it has to do with the higher level CSS system SCSS or SASS
In the DevTools, under Network, I still see that bootstrap.min.css was downloaded from the Content folder.
Symptom 2
In the above header code, the logo image and page title showed nicely on the same height in a light grey header bar. But after the upgrade, the layout is gone, ruined. Image and text have lowered, but with different amounts, and there is no light grey header bar as background for the image and text.
Do I need to learn SASS to fix this problem?
Or did something possibly go wrong with installing bootstrap?
To be honest, I had to manually copy the jQuery files from packages to Scripts.
I am now also wondering about jquery-ui.min.js/css and jquery-latest.min.js from a not upgraded version from package mutty-keyboard, as shown by the Network tab of DevTools. Could that cause interference with bootstrap???
Thanks for any hint that may possibly nudge me in the right direction.
Update:
While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade. Use Bootstrap 5 on your new project.
The security scan that suggested this upgrade is doing too many upgrade suggestions, perhaps to get you scared and take your wallet out :-)
Actually, many things have changed in the newer version of the bootstrap. First, you don't need to learn SASS for this, this is only gameplay of class names that have changed in the newer versions.
For example, you have highlighted the sr-only class but in the newer version, the name of this class has changed.
Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
The only thing you have to do is go through this documentation and your all problems will be solved.
Also, in the newer version, there is no need for jQuery.
Read all about Bootstrap version migrations in these document - https://getbootstrap.com/docs/5.0/migration/
I want to put an online counter on my (tumblr) blog.
I get a script as a result.
I know where and how to add that code, but I'm wondering how to make this link/script unclickable? Otherwise you can click on it and view a map of all the people that are currently online and I find that rather creepy.
How can I make this unclickable?
Easy CSS way: add a css-class to the document.write-span-tag part of the code which is inserted to your document via the code snippet you included:
<span id='o_"+fhs_id+"'></span>
change to
<span class='unclickable' id='o_"+fhs_id+"'></span>
and add a CSS rule to where ever you have your CSS like this:
.unclickable {
pointer-events: none;
}
(works in most browsers, also internet explorer 10 and newer.
for older browsers you'll probably need a javascript solution)
javascript solution:
add onClick='return false' to the same snippet part:
<span id='o_"+fhs_id+"' onClick='return false'></span>
<a class="btn" href="http://freehostedscripts.net/oc.php?id=SUQ5MDAwMDAwMXxmcmVlaG9zdGVkc2NyaXB0cy5uZXR8MA==" title="319 Online [FHS]" target="_blank">319 Online Users</a>
so that's what you have you can do
<a class="btn" onclick="return false"...
For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.
It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:
<span class="icon-stack">
<i class="icon-minus icon-stack-base"></i>
<i class="icon-camera icon-light"></i>
</span>
In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.
I've got an ASP.NET 4 app being developed and tested against http:// localhost/mysite - I spent a while looking into a problem with Twitter Bootstrap buttons in Firefox (v12.0) where they looked weird.
However I noted that, when testing, if I swapped the URL and changed 'localhost' for my machine's FQDN (e.g. http://mymachine.mydomain.com/mysite) then it worked normally and as expected.
This is kinda good news because it means that there isn't a "bug" as such that I have to fix but I'm curious about why it's happened in the first place.
The weird behaviour is as follows:
The 'button' is marked up as follows (in this case, a <a> to look like a button):
<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>
I also have the same behaviour when using a 'real' button, marked up as follows:
<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMainContent$btnProceedToCustomerDetails", "", true, "", "", false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>
In both cases, the buttons render in a grey, unreadable state and then sort of 'fill up' in green colour when you hover over, until it is about 75% filled up and then stops filling up.
Here's some images
The <a class="btn btn-success">
On load (before mouseover)
When you put your mouse over it, it fills up with colour from the bottom up in about 0.5 seconds, finishing up looking like this:
The <input type="submit" class="btn btn-primary">
On load (before mouseover)
After mouseover, again it fills up with colour from bottom up, in about 0.5 seconds, and looks like this:
Like I say, this only happens when using Firefox, and only when looking at localhost. Other browsers are fine. I am using a freshly downloaded copy of bootstrap.js (downloaded today) with no amendments, I only include one other css file, and even when I don't include it, it's the same behaviour.
I ran into this problem earlier today. This link: twitter bootstrap button changes rendering oddly in firefox and chrome helped me.
In my css, I applied the following:
.btn-primary, .btn-danger, .btn-success { background-image: none; filter: none;}
It worked. My pages now render correctly in firefox. Chrome worked fine for me.
After lots of efforts, I was finally able to pin down this issue to a specific CSS-Hack in Twitter Bootstrap.
Removing * (asterisk) from *background-image of btn-primary and other similar classes resolves this issue.
But the problem itself is not in the CSS. It has got to do with the implementation.
For example, I was using AjaxMin to minify and combine CSS and since *property is not a valid CSS, Ajaxmin was ignoring it rendering the final CSS without those properties. Buggy button effects being one such side-effect.