I'm using the following external files in my website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button disabled>Disabled</button><br>
<button>Not Disabled</button>
Before adding bootstrap+bootbox, my buttons worked as intended, being grayed out when disabled. But now all of my buttons always look the same, whether enabled or disabled.
I've noticed that my button visuals work again, if I don't include the bootstrap3.3.7.min.css. But that also completely breaks any custom popups that are based on bootstrap.
According to the bootbox website I'm using compatible library versions, so I don't know what could cause this behavior.
You are going to want to use class btn if you are using bootstrap so buttons can be visually disabled when disabled.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button class="btn" disabled>Disabled</button><br>
<button class="btn">Not Disabled</button>
Related
I have set up materialize css in my project, however the local copy does not appear to work with checkboxes or radio buttons. I am not sure why this would be the case. When I use the CDN version everything works as expected.
Here is a slightly messy .master file.
<%-- Font Awesome --%>
<link href="~/includes/css/all.css" rel="stylesheet" />
<%-- Includes the Materialize CSS --%>
<%--<link href="~/includes/css/materialize.css" rel="stylesheet" />--%>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<%-- Jquery because I need it still, hope to remove this in the future --%>
<%-- <script type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src=<%= ResolveUrl("~/includes/js/materialize.js") %>></script>--%>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I don't really want to call a third party CDN forever in this case.I feel I am missing something simple here and that I am being an idiot.
I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!
<h1 class="h1name" style="" ><bold><%= #user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>
I don't know why I'm getting a fat glyphicon-pencil instead of the correct one as seen in the Bootstrap Components website. http://getbootstrap.com/components/#glyphicons-how-to-use
gem 'twitter-bootstrap-rails'
Is the bootstrap version I'm using on my ruby on rails project
I am using roboto for fonts
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Another Sample with the envelope glyphicon
without the roboto font it looks like this (still very different from the desired one)
I faced the same problem, I tried by replacing the local file with cdn path. And it works.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
currently Im using bootstrap-table for my mini-project.
Im trying to use the data-show-toggle together with data-show-columns and data-search to provide more usability.
But the data-show-toggle button is displayed slightly smaller than the other button. Is there any setting i overlooked?
Heres my table setting, js and css import. appreciate for any help given. :)
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--Bootstrap-Table-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-show-columns="true"
data-search="true"
data-show-toggle="true">
....
</table>
screenshot here
I could not find a regular way to change toggle button size and fix this issue, neither the reason. That's why I decided to change the javascript file directly(also I needed to translate some texts). I would not recommend this way because it is not proper use.
i am new to anything JQuery and only know basic HTML codes.
So I was wondering what why
<div data-inline="true">
Cancel
Save
</div>
did not work in my html file, even though I blatantly copied off the Jquery Documentation. The buttons did not appear side by side. Whereas when I tried
Cancel
Save
and the buttons appeared side by side.
Does it have to do with my importing the script?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script
I'm not sure, but it is probale that:
the surrounding div causes that the anchors cannot be found by jQuery (or have different style)
you miss data-inline="true" in the upper lines
Cheers
i think you're referring to the documents from here.
my guess is that you didn't include the css file. jqm-docs.css
<head><base href="http://jquerymobile.com/test/docs/buttons/buttons-inline.html">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>jQuery Mobile Docs - Buttons</title>
<link href="../../themes/default/" rel="stylesheet">
<link href="../_assets/css/jqm-docs.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
<script src="../../js/"></script>
<script src="../docs/docs.js"></script>
</head>