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.
Related
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
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>
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>
At the first picture everything is ok.
But if i make the width of my browser a little bigger, the result is the following:
Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:
<div ng-view="" flex="" class="ng-scope flex">
<md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
<div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
<!-- ngRepeat: article in ctrl.articles -->
<div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
<md-card>
<md-card-header>
<md-card-avatar>
<img src="/images/sidenav-icons/Bomb.svg">
</md-card-avatar>
<md-card-header-text>
<span class="md-title ng-binding">FakeTitle147</span>
<span class="md-subhead ng-binding">FakeRubric3</span>
</md-card-header-text>
</md-card-header>
<img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles
</p>
</md-card-content>
<button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
<span class="ng-scope">Button</span>
</button>
</md-card>
I have no custom css (only background-color). Thanks for your ideas.
The problem was in layout="column". I just replaced this:
<div layout="column" layout-gt-xs="row" layout-wrap="" ...
to this:
<div layout="row" layout-wrap="" ...
This solution is OK for me.
Here is my md-card's loop (except the first div):
<div layout="column" layout-gt-sm="row" layout-wrap="">
<div flex="25" flex-gt-sm="50">
<md-card>
<md-card-header>
<md-card-avatar><img src="#" />
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Angular</span>
<span class="md-subhead">Material</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{imagePath}}" alt="Washed Out" class="md-card-image" />
<md-card-title>
<md-card-title-text>
<span class="md-headline">Text</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Content
</p>
</md-card-content>
<md-button>Button</md-button>
</md-card>
</div>
<!-- another card -->
</div>
This works fine, here is the picture.
But what if i don't want to display cards strictly on the lines? Is there any way to get something like
this?
That kind of layout will require you to use some javascript to add to the view logic. Since each of your cards are using rows, it would not be currently possible to do that styling.
I would check out http://masonry.desandro.com/