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>
Related
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
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?
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
I am trying to make a simple toggle example in AngularJS. I am facing one issue I need to show and hide with some animation like slide up and slide down. I have search button on header on click I show search div it is working in my plunker. My issue is to do animation...
Secondly I need to add z-index because it generates new layer. When I click search button "my name " come down when search bar is open. Why?
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
When using Angular you still have the opportunity to use plain old CSS transitions. However, there are many ways to animate elements. In my solution here I use ng-class instead of ng-show. I toggle the class active when ever you click on the trigger. Finally the class changes the state of the element which results in the animation you would like to achieve.
You could simply change ng-show to ng-class="{'active':isdiplay}" and add the following CSS:
.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}
You can however, as I said before, also use ng-show with the module ngAnimate which needs to be included in one of your own modules. This will enable animations out of the box, so that elements which can be animated get classes such as .ng-hide-remove, .ng-hide-add and .ng-hide-add-active etc. You could then style those classes on your own.
angular.module('ionicApp', ['ionic']).controller('MyController', function($scope) {
$scope.isdiplay = false;
$scope.showsearch = function() {
$scope.isdiplay = !$scope.isdiplay;
}
})
.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="MyController">
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-class="{'active':isdiplay}">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
</div>
I'm new to Angular and need to repeat objects until the data is exhausted.
Here's the code snippet that I wish to repeat.
<!-- Start box content -->
<div class='span3 box box-nomargin' style="margin-left: 0px !important;">
<!-- Now starts the box content -->
<div class='box-header red-background'>
<div class="title text-center span12" style="font-weight: 600;">Skyfall</div>
<div class="normal text-center span12 utilMonSmallTitle">Network: <span class="utilMonSmallText">My First Network</span></div>
<div class="normal text-center span12 utilMonSmallTitle">Site: <span class="utilMonSmallText">My Site 388_ascdaaf298</span></div>
</div>
<div class='box-content text-center' style="padding-bottom: 0px;">
<!-- Start box content Header -->
<div class="title span4 text-left" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Hardware</div>
<div class="title span3 text-center" style="color: black; padding-left: 20px; font-size: 14px; font-weight: 600; margin-top: -10px;">
<i id="icon508Compliant" class="icon-remove-sign" style="font-size: 40px; color: red;"></i>
<!-- The icons are: icon-remove-circle, icon-warning-sign, icon-ok-circle -->
</div>
<div class="title span4 text-right" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Software</div><br><br>
<!-- End box content Header -->
<!-- Start box content body -->
<div class="row-fluid">
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="hwVal1">{{hardwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="hwVal2">{{hardwareAlerts[0].warning}}</span>
</span>
</div>
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="swVal1">{{softwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="swVal2">{{softwareAlerts[0].warning}}</span>
</span>
</div>
</div>
<!-- End box content Body -->
<!-- Start box content footer buttons -->
<div class="row-fluid">
<button class="btn btn-small btnBoxLeft"><i class="icon-warning-sign">View Critical</i></button>
<button class="btn btn-small btnBoxRight"><i class="icon-warning-sign">View All</i></button>
</div>
<!-- End box content footer buttons -->
</div>
<!-- Now ends the box content -->
</div>
<!-- End box content -->
So that whole snippet of code will REPEAT within a FLATTY Bootstrap "ROW" until there's no more data.
I'm used to Handlebars.js but Angular is a little tricky.
It needs to repeat based on the number of NETWORKS there are.
For instance: If there are 10 networks, the above code should repeat 10 times displaying 10 BOXES.
I have my controllers and directives code working... just need to understand the "REPEAT" stuff.
Thank you all.
You need to use ng-repeat
<div class='span3 box box-nomargin' style="margin-left: 0px !important;" ng-repeat="object in objects">
Where in the above snippet objects would be your ARRAY of objects. If you only have an object and you wish to iterate keys, use ng-repeat="(k, v) in objects". (Where k is your property name and v is the value of said property)
To display the data, simply reference the property within the repeater where you wish to use it via:
{{object.PROPERTY}}
Or, if using the (k, v) in objects simply do {{k}} or {{v}}