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>
Related
Im using the barryvdh dompdf to generate the pdf file for my view ,
This is the expected outcome:
but what I got is ：
The css design of the view has been change . im using both css and bootsrap for desgining the page
may I ask how the improve this?
here is my code on view
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<title>
Events Ticket
</title>
</head>
<style>
h6
{
color: #96a0a5;
}
h3
{
color: #b7af92;
}
p{
caret-color: white;
}
span{
color:#b7af92 ;
}
</style>
<body>
<div class="container mt-5 ms-5 " >
<div class="row">
<div class="col-lg-8 mb-4">
#foreach ($tickets as $key=> $ticket)
<div class="card" >
<div class="card-body" style="background-color: #48617d;">
<div class="col-12">
<div class="row" >
<div class="col-6" >
<h6 class="card-title">Event : <span>{{ $ticket->GiftGiving->name }}</span></h6>
<h6 class="card-title ">Name: <span>{{ $ticket->name }}</span></h6>
<h6 class="card-title ">Date &Time: <span>{{ $ticket->GiftGiving->start_at }}</span></h6>
<h6 class="card-title ">Venue: <span> {{ $ticket->GiftGiving->venue }}</span></h6>
</div>
<div class="col-6 text-center mt-3" style=" border-left-style: dashed; border-color: #b7af92;">
<h6><span >Ticket No. {{ $ticket->ticket_no }}</span></h6>
<h6><span class="mt-5">Batch No: {{ $ticket->GiftGiving->batch_no}} </span></h6>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
code of my controller:
public function GenerateTicket($code)
{
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail(); //4.3 ??
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $GiftGiving->id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
GiftGiving::where('code', $code)->firstOrFail()->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
Any answer is high appreciated, feel free to drop answer . Thank you in advance.
new updated part
this is how it looks like inside the browser
I'm using bootstrap-tempus-dominus for Datetimepickers in my application.
How can I change the color of the displayed month and day's names with css
Just add the custom style below in your page it will work as desired:
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#000 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#000 !important;
}
Check this example:
$(function() {
$('#datetimepicker1').datetimepicker();
});
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#0f0 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#0f0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
I want to use Summernote WYSIWYG Editor in Google Material Design.
It works, but if you try to open a popup, everything gets grey and you can't click anywhere:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="miniHUB. Das Portal für Ministranten!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>TestPage</title>
<meta name="theme-color" content="#3372DF">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<!-- Summernote -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">miniHUB</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<!--<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>-->
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Suche...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item" onclick="loadPage('about.html')"><a>Über/Kontakt</a></li>
<li class="mdl-menu__item">WhatEver</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">ℹ</td>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">Beschreibung:</td>
<td class="mdl-data-table__cell--non-numeric"><textarea style="overflow-y: auto; width: 100%; border: none;" name="beschreibung" id="beschreibung"></textarea></td>
</tr>
</table>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
function loadPage(page) {
document.location = page;
};
</script>
<script>
$('#adminedit').click(function () {
document.location = "admin.html";
});
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
});
</script>
</body>
</html>
If I only use pure HTML, it's working very good.
I already tried to use z-index and different divs, but i can't get it working.
Thanks for your Help!
I found a way to correct the problem:
function deleteProblems (){
$('.modal-backdrop').remove();
window.setTimeout(deleteProblems, 200);
}
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
window.setTimeout(deleteProblems, 500)
});
Hopefully it helps you!
Philipp
I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link how to create sidebar menu in bootstrap that stays? since I want my menu to be exactly as shown in that link. But I couldn't achieve the result. Something about simple-sidebar.css is mentioned in the link but I would like to know where exactly and how it should be added to my razor pages project. What changes should I make to move my navigation menu from top to left side as shown in the link that I mentioned since it is not working for my razor pages project? A detailed explanation would be really helpful as I am new to razor pages. The code in my "_Layout.cshtml" is shown below. Please help me with this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-
property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-
version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script
src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
the simple-sidebar.css can be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .
Simply download the lib and copy thesimple-sidebar.css to wwwroot/lib/simple-sidebar/css/simple-sidebar.css .
and now you could add a link in you layout:
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.
<!-- your nav on top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- you nav on left side -->
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<!-- your main body here -->
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
and add a style to show nav button and left side :
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
At last , to toggle the sidebar , bind a function to handle the event :
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
Here's a screenshot:
Here's the complete code list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-
property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-
version="true" />
</environment>
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
<script>
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
#RenderSection("Scripts", required: false)
</body>
</html>
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>