I am using the bootstrap switcher:
http://www.bootstrap-switch.org/examples.html
And I would like to set the label width to 0 because I only want to see ON and OFF, not the white label between. But if I set label width to 0 there is still some pixel of the white label visible. Do you know a trick to change this? Happy about any help!
<input id="switch-labelWidth" type="checkbox" data-label-width="0">
UPDATE:
<link href="http://www.bootstrap-switch.org/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/docs/css/highlight.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/docs/css/main.css" rel="stylesheet">
<input id="switch-labelWidth" type="checkbox" data-label-width="100">
<script src="http://www.bootstrap-switch.org/docs/js/jquery.min.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/bootstrap.min.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/highlight.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/main.js"></script>
I don't think you can do it using plugin options, but you could do it using some CSS tricks:
.bootstrap-switch-label {
width: 0px ;
padding: 0px ;
}
.bootstrap-switch-wrapper {
width: 55px ; // You may need to change this if you do not use the "normal" size
}
Related
his is the CSS code that I already have in place for fixed-sized buttons. I want to increase the size of the icon inside of these buttons. The style of the button is |text + icon|. Thank you
.nectar-button.fixed-size {
width: 250px;
height: 75px;
font-size: 18px;
line-height: 30px;
}
give another class name on icon tag and give css like:
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
</style>
</head>
<body>
<button class="btn"><i class="fa fa-home"></i> Home</button>
</body>
</html>
try these code, I think your problem will be solved, Thank you.
I have an admin page like this:
<div class="admin_page">
<div ng-repeat="user in users">
<div class="my-form-group">
<textarea class="my-form-control">{{user}}</textarea>
</div>
</div>
</div>
This is my main.scss file:
.my-form-group {
#extend .form-group;
.my-form-control {
#extend .form-control
}
}
#import "./admin.scss";
This is my admin.scss:
.admin_page {
textarea {
height: 200px;
}
}
The height of text area is not set.
I tried <textarea class="my-form-control" style="height:200px">{{user}}</textarea> and it works.
Why is the sass version not working?
Edit:
this is my heading:
<!--underscore-->
<script src="/node_modules/underscore/underscore-min.js"></script>
<!--jquery-->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!--bootstrap (keep the css although duplicate in bundle, since some may depend on it)-->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--font-awesome-->
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
<!--summernote-->
<link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
<!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->
<script src="/node_modules/summernote/dist/summernote.min.js"></script>
<!--angular-->
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-resource/angular-resource.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<!--angular-summernote-->
<script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>
<!--bundle-->
<script src="/public/script/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/public/style/bundle.css">
Note that I imported sass version of bootstrap in main.scss, which means inside bundle I have the bootstrap css.
The reason I include the original non-sass version bootstrap is for summernote, which depends on bootstrap.
Edit 2:
I tried the following:
.admin_page {
.my-textarea {
#extend .my-form-control;
height: 500px;
}
}
which has a specificity of 0,0,2,0 (2 classes), it doesnot work
Also this:
.admin_page {
textarea.my-form-control {
height: 200px
}
}
which has a specificity of 0,0,2,1 (2 classes + 1 element), it works. Why is the previous one not working?
It is not problem of sass. It is clearly the problem of specificity.
You just need to mention high specificity css. Since you have a class to the textarea, you can do like this:
textarea.my-form-control{
height: 200px;
}
Read this to understand how specificity works in css.
Practially, i have a css file with some classes ,id's and html selectors (index.css) and the kendo.mobile.all.min.css.
I've tried putting it before and after to no avail.
My classes won't work , for example:
<div data-role="view" data-title="main-menu" id="main-menu" data-persist="true" class="body" data-transition="overlay:up" >
<h1>Text text</h1>
<h2>Another</h2>
<div>
This code, when used only with my css and the kendo.common.min.css and kendo.default.min.css files, shows the proper styling with background, when used , in any combination with kendo.mobile.all.min.css all i see is the plain html.
I'm a begginer (still in university) , is there something implicit about this that escapes me? I also tried jquery mobile but quit that because it overrided all my css and got blank html.
Also anyone know how can i change the default android skin from android-dark to android-light without forcing the app to run on one platform? (as in still adapt to different platforms)?
My include order:
<script type="text/javascript" src="cordova.js"></script>
<script src="js/load.unload.js"></script>
<script src="js/hangman.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<!-- audio css-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.ui.core.min.js"></script>
<script src="js/kendo.mobile.listview.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- audio js sources-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
you can try adding the !important property to your css to see if that works.
like this:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css
.myInvalid {
border: 5px solid red;
}
I have added that file to my index.html and the file gets loaded but when I write
<input type="text" class="myInvalid"/> there isn't any border around my input.
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ui-bootstrap-0.4.0.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
<link href="Content/css/my.css" type="text/css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div data-ng-view=""></div>
</div>
<input type="text" class="myInvalid"/>
</body>
</html>
If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?
You have to make sure that your selector is more specific than the bootstrap one,
Instead of .myInvalid use input[type='text'].myInvalid
Check out this answer for more about selector priority.
This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:
.myInvalid {
border: 5px solid red !important;
}
I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.
You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.
I don't know how to use CSS. So I am asking here.
I am creating a JSP page. I have added two tables in my JSP page using Twitter Bootstrap. I need to add different alignment for both tables. Since I am using bootsrap both tables having same alignment.
This is my code
<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>
<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>
I want to align the text to center for table 1 and left for table 2. Table 2 header should be alinged to center and table 2 boreder should be blue.
So I tried this CSS
.table.table-hover.target td {
text-align: left !important;
}
.table.table-hover.target th {
text-align: right !important;
}
.table.table-bordered.source td
{
text-align: center !important;
}
.table.target
{
border-color:blue;
}
It is not working.
When I give
.table td
{
text-align:left !important;
}
it aligns both table contents to left.
I dont now CSS. How can I write the CSS rule?
you probably have something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
right below the bootstrap-responsive.css (or if you are not using responsive layout, you will not even use this file, witch would then be below the bootstrap.css call).
add a new file like:
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
and add all your override rules to that file, the code above will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
the line "/assets/css/application.css" will say that your code will be in that specific path, change it for your needs
Comments:
Remember to comment your CSS rules so others (and even you in 6 month time for example) will understand why did you wrote that... in CSS you can add comments wrap it with /* ... */
for example:
/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
text-align:left !important;
}