I want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>
Related
I am trying to make the latitude and longitude to go below datakey in a column format when going smaller screen. I Played around with material design xs and and is not working for me. Below i have the code,right now i am hiding the lat and long since they are cutting off when going to like an iPhone-5 screen size
div layout layout-align="space-between center">
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key:</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout layout-align="space-between center">
<div style="padding-right:15px;"><strong class="lat-long-label">{{'LABELS.LAT'|translate}}:</strong><span>{{$ctrl.asset.latitude}}</span></div>
<div><strong class="lat-long-label">{{'LABELS.LONG'|translate}}:</strong><span>{{$ctrl.asset.longitude}}</span></div>
</div>
<div layout layout-xs="column" layout-align='space-between center' layout-align-xs='center start'>
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout>
<span layout layout-padding>
<strong translate="LABELS.LAT"></strong>
<label>{{$ctrl.asset.latitude | number: 2}}</label>
</span>
<span layout layout-padding>
<strong translate="LABELS.LONG"></strong>
<label>{{$ctrl.asset.longitude | number: 2}}</label>
</span>
</div>
<div ng-if="!$ctrl.asset.latitude || !$ctrl.asset.longitude" class="ng-animate-disabled">
<label>No Location Information Available</label>
</div>
</div>
</div>
had to rewrite the whole section using material breaks.
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
I want to center the title and navigation links in my paper-toolbar. I am using the properties "justify" and "bottomJustify" to accomplish this, but the content remains on the left side.
<paper-toolbar class="medium-tall" justify="center" bottomJustify="center">
<div class="title">Titel</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
It does not matter which "tallness" I choose. It never works. Does anyone has an idea how to solve this?
Update:
This code works:
<paper-toolbar class="medium-tall" justify="center" bottom-justify="center">
<div class="top">
Title
</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
I had to:
change the bottomJustify to bottom-justify
remove the "title" class and instead use the "top" class
In your code you should use bottom-justify instead of bottomJustify to set the attribute!
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
I have a list of items in one of my view.
I can only fit up to 6 items, and it's laid out like this:
I used class="col-md-2" for each one.
When I have more than 6, it just simply go down to the another row.
I don’t want that. You can see it here.
Now, if the list has 6 or more items,
list them horizontally
show the big > so that the users will know that there is more
show the 2 dots in the middle
Edit
This is what I got so far. I used Larval 4 so this syntax is in HTML/Blade.
#foreach ( MarketingMaterialCategory::all() as $mmc )
<h2><i class="fa fa-file-image-o color lighter"></i> {{{ $mmc->name or '' }}} <small> </small></h2>
<div class="row">
#foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)
<div class="col-md-2" >
<!-- Shopping items -->
<div class="shopping-item">
<!-- Image -->
<div class="col-sm-12 imgbox" >
<!-- <span class="col-sm-6"></span> -->
<img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
</div>
<!-- Shopping item name / Heading -->
<h6>{{{ $marketing_material->title or '' }}}<span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>
<!-- Shopping item hover block & link -->
<div class="item-hover bg-color hidden-xs">
Download
</div>
</div>
</div>
#endforeach
</div>
<hr>
#endforeach
Can someone help me how to resolve this ?
Bootstrap doesn't support that kind of scrolling. However, I have used this JavaScript library in the past and it does pretty much exactly what you want: Slick.js
It is very flexible and it will only show the scrolling options if it can't display all the contents on the page.
If you use it though, do not use the bootstrap col-md-2 classes, just set a manual width.