I am trying to show two switches in a Sidenav, with labels of different length. Here is my original version, without trying to align the switches:
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<ul id="slide-out" class="sidenav">
<li><a>
Label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
<li><a>
Long long label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
This renders exactly as expected, with the two switches appearing horizontally wherever the labels end:
I thought I could fix this by adding the right class to the switches, i.e. changing both <span class="switch"> to <span class="switch right">; however, this then completely breaks the vertical alignment of
the switches:
What is the correct way of right-aligning these switches in a sidenav?
You can make a flex container out of your divs and align them space-between. You can affect them if you change the width, this so you can tweak your result.
Hope this helps. The HTML is unchanged below.
.sidenav li>a {
align-items: center;
display: flex!important;
justify-content: space-between!important;
}
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<ul id="slide-out" class="sidenav">
<li><a>
Label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
<li><a>
Long long label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
I don't know if it is possible doing it strictly the material way, but you can add this to css:
<style>
.switch label .lever {
top: 16px;
float: right;
}
</style>
Example:
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<style>
.switch label .lever {
top: 16px;
float: right;
}
</style>
</head>
<body>
<ul id="slide-out" class="sidenav">
<li><a>
Label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
<li><a>
Long long label
<span class="switch">
<label>
<input type="checkbox"></input>
<span class="lever"></span>
</label>
</span>
</a></li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Related
the first one works but I am unable to change the color of the second (.fa ). I am able to change the font color while not active.
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
background: green;
/* padding: 10px; */
}
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .fa{
color: yellow;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<div id="pgggo-sort-filter" class="pgggo-sort-filter">
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
</div>
</label>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
</div>
</label>
</li>
</ul>
<a class="button primary" href="#">Sort
</a>
</div>
Since you want a yellow arrow, when the checkbox is only selected, only one css declaration is needed:
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
background: green;
/* padding: 10px; */
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="font-size:24px;">
<div id="pgggo-sort-filter" class="pgggo-sort-filter">
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
</div>
</label>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
</div>
</label>
</li>
</ul>
</body>
</html>
This one is fine...
The neighbor ~ of the checkbox can only be the element with the icon-box class and not its child with class fa
input[type=checkbox]:checked ~ .icon-box{
background: green;
}
input[type=checkbox]:checked ~ .icon-box .fa {
color: yellow;
}
Proof:
input[type=checkbox]:checked ~ .icon-box{
background: green;
}
input[type=checkbox]:checked ~ .icon-box .fa {
color: yellow;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<div id="pgggo-sort-filter" class="pgggo-sort-filter">
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
</div>
</label>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
</div>
</label>
</li>
</ul>
<a class="button primary" href="#">Sort </a>
</div>
In Bootstrap 3 there were optional icons for each of the validation states. The icon would appear in the right side of the input using the has-feedback, has-success, has-danger, etc... classes.
How can I get this same functionality in Bootstrap 4 using the valid-feedback or invalid-feedback classes?
Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states (is-valid and is-invalid) that control display of the valid-feedback and invalid-feedback text.
With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the valid/invalid-feedback.
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
HTML
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
Demo of input validation icons
Demo with working validation
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
</div>
Notice that the containing form-group is position:relative using the position-relative class.
Form validation icons are built-in Bootstrap 4.3.1, see documentation here : https://getbootstrap.com/docs/4.3/components/forms/#custom-styles
For a client-side validation, you can use ParsleyJS plugin.
See a demo here : https://jsfiddle.net/djibe89/tu0ap111/
Fake code
a simple way to do it with bootstrap 4 is:
<div class="input-group mb-3 border border-success">
<input type="text" class="form-control border-0" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text bg-white border-0 text-success"><span class="iconify" data-icon="subway:tick" data-inline="true"></span></span>
</div>
</div>
obviously you have to include
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
I an working on my tutorial project:
I have this code:
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
How can I make dummy! word to be on the same line with ON/OFF switch from the right.
Like this:
H5 is a block element by default, which means it will be on a new line. Use span or assign display: inline or display: inline-block to your H5 tag.
You can use the float property set to left as follows:
<div class="well">
<div>
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
</div>
<h5 class="align-left">dummy! </h5>
CSS:
.align-left {
float: left;
}
You can set display: inline-block to <h5>, because <h5> acts like a block element
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
h5{ display: inline-block;}
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
I am writing a PhoneGap application and using Twitter's Bootstrap for responsive design.
The boxes that say campus/account/department are the select boxes. I think it's obvious the problem is how the select boxes are small, and unchangeable when I try things in css like:
select{ height: 30px; /** OR */ lineheight: 30px; }
Screenshot of what the issue is with my select boxes:
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
<li id="titleText"><h4>Blackbriar</h4></li>
</ul>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropDown">Home <i class="icon-white icon-home"></i></li>
<li class="dropDown">Transactions <i class="icon-white icon-credit-card"></i></li>
<li class="dropDown">Settings <i class="icon-white icon-cog"></i></li>
<li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="templates">
<ul id="templateUl" class="nav nav-pills">
<li class="templi">
<a class="pill">
<text class="temp">Walmart</text>
</a>
</li>
</ul>
</div>
<div id="templateEdit" class="span9">
<form id="codingForm" method="post">
<input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
<input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
<select id="campusField" required>
<option value="">Campus</option>
</select>
<select id="accountField" required>
<option value="">Account</option>
</select>
<select id="departmentField" required>
<option>Deptartment</option>
</select>
<input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
<input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
<input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
<br>
<button id="saveBtn" class="btn btn-large btn-primary">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/precodeFunctions.js"></script>
<script type="text/javascript" src="js/precode.js"></script>
</body>
</html>
Update style as follows :
select.custom { min-height: 30px; /** OR */ line-height: 30px; }
change your select tags html as follows :
<select id="accountField" class="custom" required>
<option value="">Account</option>
</select>
I'm very noob in bootstrap. I tried my first bootstrap page and then downloaded a theme from bootswatch.com and replaced the bootstrap.css with the Cerulean theme. When I change the font in the bootstrap.css it stay with the old theme
#import url(//fonts.googleapis.com/css?family=Caesar+Dressing);
but its not reflecting when I refresh my page.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
</style>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">GUVI</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're linking to the right font, yeah; that said, here's my take on this:
In most cases you should use a tag to import Google web fonts. I generally avoid using #import where possible because it delays the loading of the file.
All you should need to do to replace the font is to specify the new font-family as 'Caesar Dressing' inside a body {} style block. Assuming you've already done that in your local copy of bootstrap.css, if that still doesn't work try specifying it inside a tag inside your HTML. You should avoid doing that where possible though; it makes it annoying down the road when you have multiple pages to maintain.
One other thing: I noticed you have some inline styles for some of your inputs. You should really avoid using those where possible--it's good form to try and separate presentation and content markup as much as possible.