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.
Related
I added cdn to next.js head section but it does not work.
import Head from "next/head";
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
></link>
</Head>;
I tried to render this simple icon but it does not show any icon. it just simply shows string "add"
<i className="material-icons">add</i>
I came across the same problem and the following worked for me:
Add the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css. After I did this, icon name worked
The workaround I found is to use Code point instead of the icon name:
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</Head>
<span className="material-icons"></span>
I solved this by disabling font optimization: https://nextjs.org/docs/basic-features/font-optimization
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>
I am having an issue in CSS where I am not able to re-collapse my mobile menu after it's initially been opened. I can't seem to track the issue down.
You can inspect the CSS and function here: http://www.whatshoulditraintoday.com/
Could someone please provide a valid explaination of what's going on here so that I may learn and fix this?
Thank you
The reason the navigation bar doesn't re-collapse is because you load Bootstrap's files two times in your page. One regular and one minified version.
<!-- In head -->
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- In body -->
<script src="/js/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
Remove one version and it will re-collapse as expected.
I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
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>