How to style material js component in inline style or my local css file.I have tried using defining class in directive like below code,
<md-card style="width: 20px;">
Why not use flex?
<div layout="row">
<md-card flex="20"></md-card>
</div>
To style the md-card, give a class or id to the md-card tag and apply CSS to it.
Refer to https://codepen.io/narmadamurali02/pen/LYrzwJz
HTML code
<section ng-app="app">
<article ng-controller="MainCtrl">
<div layout="row" layout-align="start start" layout-fill>
<md-card id="preview-table" class="preview-outer-container" style="width: 550px; height: 370px;">
<md-toolbar id="preview-header">
<div>card header
</div>
</md-toolbar>
<md-card-content class="pa-5">
<div>
card body
</div>
<md-card-content />
</md-card>
</div>
</article>
</section>
CSS code
.preview-outer-container {
box-shadow: none;
border: 1px solid #ddd;
}
#preview-header {
background: #000;
border-bottom: 1px solid $border-color;
font-size: 12px;
min-height: 30px;
color: #fff;
height: 25px;
cursor: move;
padding: 10px;
}
JS code
var app = angular.module("app", ["ngMaterial"]);
app.controller("MainCtrl", ctrl);
function ctrl($scope, $element) {}
In the above example, I have removed the box-shadow to md-card and for md-toolbar I have overridden the default color blue to black.
Output:
https://i.stack.imgur.com/fdvfL.png
Related
I am using md-tooltip in md-button and using marquee to display scrolling label of button. But md-tooltip just shows for a second and then disappears when I move mouse over the md-button. I have noticed that when I remove the marquee code md-tooltip is getting displayed properly. Tried using md-z-index, md-visible as well but no help. All the controls are added in section.
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div ng-repeat="mybutton in allbuttons">
<md-button class="md-fab">
<div >
<md-tooltip md-direction="top" md-visible="true">{{mybutton.buttontooltip}}</md-tooltip>
<img ng-src={{mybutton.imagesource}} style="width:50px" />
</div>
</md-button>
<div class="buttonLabel">
<marquee scrollamount="1" style="float:left; font-size: 12px; width:70px; color: white; padding-right: 5em">
<div>
{{buttonlabel}}
</div>
</marquee>
</div>
</div>
</section>
my css for class buttonLabel is as below.
.buttonLabel {
background-color: #080808;
color:#EEE5E5;
bottom: 2px;
left: 520px;
margin: 10px;
}
Plucker link is below. If you remove marquee it will work fine.
https://codepen.io/naddy1/pen/eKbGVN
Please let me know if I am doing it the correct way?
Using ngDraggable/Angular Material and having problems dragging objects within the parent DIV container.
The DIV style has a defined height and an overflow-y of "scroll", and the data is a list of employees.
I was expecting the DIV tag to scroll as I dragged my object down the list, but the scrolling won't trigger.
Stuck for a solution. Any help would be appreciated. The following code snippet is a stripped down example of my code.
.allEmployeeContainer {
height: 500px;
overflow-y: scroll;
}
.employeeHolder{
display: inline-block;
width:100%;
font-weight: normal;
font-size: 10.5pt;
padding:10px 0px 10px 0px;
margin:0px;
}
<div class="allEmployeeContainer">
<div ng-repeat="employee in someCtrl.employees" style="padding:0px; margin:0px" >
<div class="employeeHolder" layout="row" layout-wrap>
<div style="width:100%; margin-top:10px;" layout="row" layout-wrap>
<div flex="15">
<div class="drag-object" ng-drag="true" ng-drag-data="clip"></div><br />
</div>
<div flex>{{employee.firstName}}</div>
<div flex>{{employee.lastName}}</div>
</div>
</div>
</div>
</div>
I'm using Angularjs 1.5 with Angular Material 1.0.5 to create a mock table. The issue I have is I can't get the child component 'cell' background-color to fill out 100% in height of the parent. Here is my jsfiddle. Any help on how to do this is appreciated?
JSFIDDLE
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<style>
.table-row{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.table-cell{
border-right:1px solid black;
}
</style>
<script type="text/ng-template" id="/table">
<div layout='column'>
<div ng-repeat='col in [0,1,2]'>
<div layout="row" class='table-row'>
<div layout-align='center center' ng-repeat='row in [0,1,2]' flex class='table-cell'>
<div ng-if='$odd' flex>
<cell></cell>
</div>
<div ng-if='$even'flex>
TEST</br>
TEST</br>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="/cell">
<div style='background-color:red'>
CELL
</div>
</script>
<h3>
{{name}}
</h3>
<table>
</table>
</div><!--end app-->
You need to add a hierarchy of layout="column/row" attributes. They are the containers forflex`, otherwise your flex won't have any effect.
https://jsfiddle.net/t8pssapu/
I am developing an app using onsen ui and angular js. Lets say I have 3 html files(physical) not the ons-template one on the same page. How can I make a header of menu that will appear on all the three pages.
Here is an example with ons-navigator and ons-toolbar. You can add a footer in the same way, although a little css adjustment will be needed.
ons.bootstrap()
.back-button-icon{
vertical-align: top;
background-color: transparent;
height: 44px;
line-height: 44px;
font-size: 36px;
margin-left: 8px;
margin-right: 2px;
width: 16px;
display: inline-block;
padding-top: 1px;
}
.back-button-text{
vertical-align: top;
display: inline-block;
line-height: 44px;
height: 44px;
}
ons-toolbar ~ ons-navigator .page__content{
margin-top: 44px;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-toolbar>
<div class="left">
<div class="toolbar-button" ng-show="navi.getPages().length > 1" ng-click="navi.popPage()">
<i class="ion-ios-arrow-back back-button-icon"></i><span class="back-button-text">Back</span>
</div>
</div>
<div class="center">Title</div>
<div class="right"></div>
</ons-toolbar>
<ons-navigator var="navi" page="page1.html"></ons-navigator>
<script type="text/ng-template" id="page1.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page1
<ons-button onclick="navi.pushPage('page2.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page2.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page2
<ons-button onclick="navi.pushPage('page3.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page3.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page3
</div>
</ons-page>
</script>
I cannot get the layout attributes to work inside directives for some reason.
Here is an example with layout column inside a directive with plunk link. Any solution or idea to fix these?
Directive
<div style="width: 800px; height: 800px;">
<div layout="column" style="width: 100px; height: 100px; background: red"></div>
<div layout="column" style="width: 100px; height: 100px; background: green"></div>
</div>
You're missing layout="row" on the outer div