I have HTML block:
<div class="item" ng-click="toogle()"></div>
And CSS style:
.item:after {
content: "\A";
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #7da9cd transparent transparent transparent;
position: absolute;
left: 50%;
bottom: -8px;
margin-left: -12px;
}
How I can hide style :after after each click toggle?
Fix your css, :after isn't ok, and then try something like:
CSS:
.item:{
display: block;
}
JS:
$scope.toggle = function(){
angular.element('.item').css('display','none');
}
Related
In the following image which is my implementation, I have two sets of photos, the first group is uploading ones, and the second groups are the uploaded ones.
In reality, right after the last uploading image, the second group should start.
I started style with available photos, later adding uploading images stamp was added, and codes are becoming spaghetti.
I looking for a way to make the asked scenario. Any idea?
My simplified HTML codes is (beside the html comments, I put some comments with ** here for explanation)
<div class="gallery-wrapper">
<ng-container *ngFor="let file of progressFiles; let i = index;">
<div class="frame">
<div class="photo-wrapper">
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
</div>
<div class="waiting-frame">
<div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
<div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
</div>
</div>
</ng-container>
<!-- this part read medias -->
<div *ngIf="mediaContent && mediaContent.length">
<!-- draged and dropped medias -->
<div dnd-sortable-container [sortableData]="mediaContent">
<ng-container *ngFor="let media of mediaContent ; let i = index">
<div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
<div class="photo-wrapper">
<img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
</div>
<div class="modifiers hidden-sm hidden-xs">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
<div class="modifiers visible-sm-inline-block visible-xs-inline-block">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2"></div>
<div class="sprite sprite-editor adjust"></div>
<div class="sprite sprite-garbage-bin-black"
(click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
*ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
And here is my SASS codes using flex-box technique.
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-left: -5px;
margin-right: -5px;
.frame {
margin: 10px;
border-radius: 6px;
border: 1px solid $gray;
max-width: 152px;
height: 194px;
overflow: hidden;
position: relative;
cursor: move !important;
display: inline-block;
.photo-wrapper {
width: 100%;
height: 150px;
overflow: hidden;
border-bottom: 1px solid $gray;
display: flex;
align-items: center;
background-color: $gray-light;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 150px;
pointer-events: none;
}
}
.modifiers {
display: inline-block;
position: relative;
padding: 8px 20px;
}
.waiting-frame {
display: inline-block;
text-align: center;
position: absolute;
background-color: $gray-base;
opacity: 0.6;
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 194px;
border-radius: 6px;
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 50px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 247, 0, 0.2);
border-right: 1.1em solid rgba(255, 247, 0, 0.2);
border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
border-left: 1.1em solid $brand-primary;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}
I experience the following strange behavior in ui-bootstrap and angular 1.4. When I put a footable table directive inside a customized bootstrap panel, called hpanel, the footable initially takes more place than the panel itself:
But if I resize the screen (e.g. by collapsing the Developer Tools panel here), the footable directive draws itself and fits within panel:
Importantly, I've experienced similar problems with angular-c3 charts directives (they load incorrectly, exceeding the size of hpanel, but upon page resize behave fine), so it's probably not just a broken directive.
Have you seen anything similar?
DETAILS:
Below is an HTML template that represents the non-functional part of page. There we have an hpanel and within it a table with angular-footable directive ^1.0.3, applied to it.
Here's the template (toolList.html):
<div class="content">
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Available tools.
</div>
<div class="panel-body">
<input type="text" class="form-control input-sm m-b-md" id="filter" placeholder="Search in table">
<table id="example1" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" data-filter=#filter>
<thead>
<tr>
<th data-toggle="true">Id</th>
<th>Class</th>
<th>Label</th>
<th>Description</th>
<th data-hide="all">Owner</th>
<th data-hide="all">Contributor</th>
<th data-hide="all">Inputs</th>
<th data-hide="all">Outputs</th>
<th data-hide="all">Base command</th>
<th data-hide="all">Arguments</th>
<th data-hide="all">Requirements</th>
<th data-hide="all">Hints</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tool in vm.tools">
<td><a ui-sref="tool-detail({id: tool.id})">{{tool.id}}</a></td>
<td>{{tool.tool_class}}</td>
<td>{{tool.label}}</td>
<td>{{tool.description}}</td>
<td>{{tool.owner}}</td>
<td>{{tool.contributor}}</td>
<td>{{tool.baseCommand}}</td>
<td>{{tool.arguments}}</td>
<td>{{tool.requirements}}</td>
<td>{{tool.hints}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
The footable directive is meant to hide some columns of the table and show them upon click on a table row. It also provides pagination. It doesn't seem to work upon page load, but when I resize the page and the size of screen crosses the media-type margin (so that from medium-size screen it becomes large screen in bootstrap css terms), pagination buttons appear and columns that are meant to be hidden are hidden.
Here's how I import the footable directive in my main module app.js:
require("footable/js/footable");
require("footable/js/footable.filter");
require("footable/js/footable.striping");
require("footable/js/footable.sort");
require("footable/js/footable.paginate");
require("footable/css/footable.core.css")
require("angular-footable");
angular.module("app", [
...,
"ui.footable",
])
I use webpack to load all those modules and bower to install the dependencies.
hpanel is just a scss class, here is its definition:
/* Panels */
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer, .hpanel > .panel-section {
color: inherit;
border: 1px solid $border-color;
border-top: none;
font-size: 90%;
background: $color-bright;
padding: 10px 15px;
}
.hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
background: #fff;
border-color: $border-color;
border: 1px solid $border-color;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid $border-color;
border-radius: 2px;
padding: 20px;
position: relative;
}
.hpanel.panel-group .panel-body:first-child {
border-top: 1px solid $border-color;
}
.hpanel.panel-group .panel-body {
border-top: none;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}
.panel-tools {
display: inline-block;
float: right;
margin-top: 0;
padding: 0;
position: relative;
}
.hpanel .alert {
margin-bottom: 0;
border-radius: 0;
border: 1px solid $border-color;
border-bottom: none;
}
.panel-tools a {
margin-left: 5px;
color: lighten($color-text, 20%);
cursor: pointer;
}
.hpanel.hgreen .panel-body {
border-top: 2px solid $color-green;
}
.hpanel.hblue .panel-body {
border-top: 2px solid $color-blue;
}
.hpanel.hyellow .panel-body {
border-top: 2px solid $color-yellow;
}
.hpanel.hviolet .panel-body {
border-top: 2px solid $color-violet;
}
.hpanel.horange .panel-body {
border-top: 2px solid $color-orange;
}
.hpanel.hred .panel-body {
border-top: 2px solid $color-red;
}
.hpanel.hreddeep .panel-body {
border-top: 2px solid $color-red-deep;
}
.hpanel.hnavyblue .panel-body {
border-top: 2px solid $color-navy-blue;
}
.hpanel.hbggreen .panel-body {
background: $color-green;
color: #fff;
border:none;
}
.hpanel.hbgblue .panel-body {
background: $color-blue;
color: #fff;
border:none;
}
.hpanel.hbgyellow .panel-body {
background: $color-yellow;
color: #fff;
border:none;
}
.hpanel.hbgviolet .panel-body {
background: $color-violet;
color: #fff;
border:none;
}
.hpanel.hbgorange .panel-body {
background: $color-orange;
color: #fff;
border:none;
}
.hpanel.hbgred .panel-body {
background: $color-red;
color: #fff;
border:none;
}
.hpanel.hbgreddeep .panel-body {
background: $color-red-deep;
color: #fff;
border:none;
}
.hpanel.hbgnavyblue .panel-body {
background: $color-navy-blue;
color: #fff;
border:none;
}
.panel-group .panel-heading {
background-color: $color-bright;
}
.small-header .hpanel {
margin-bottom: 0;
}
.small-header {
padding: 0 !important;
}
.small-header .panel-body {
padding: 15px 25px;
border-right: none;
border-left: none;
border-top: none;
border-radius: 0;
// background: $color-bright;
}
.panel-body h5, .panel-body h4 {
font-weight: 600;
}
.small-header .panel-body h2 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 0 0;
}
.small-header .panel-body small {
color: lighten($color-text, 10%);
}
.hbreadcrumb {
padding: 2px 0px;
margin-top: 6px;
margin-bottom: 0px;
list-style: none;
background-color: #fff;
font-size: 11px;
> li {
display: inline-block;
+ li:before {
padding: 0 5px;
color: $color-navy-blue;
}
}
> .active {
color: lighten($color-text,20%);
}
}
.wrapper {
padding: 10px 20px;
}
.hpanel.collapsed .panel-body, .hpanel.collapsed .panel-footer {
display: none;
}
.hpanel.collapsed .fa.fa-chevron-up:before {
content: "\f078";
}
.hpanel.collapsed .fa.fa-chevron-down:before {
content: "\f077";
}
.hpanel.collapsed.panel-collapse .panel-body {
border-width: 0 1px 1px 1px;
border-color: $border-color;
border-style: solid;
}
.hpanel.collapsed .hbuilt.panel-heading {
border-bottom: 1px solid $border-color;
}
body.fullscreen-panel-mode {
overflow-y: hidden;
}
.hpanel.fullscreen {
z-index: 2030;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
margin-bottom: 0;
}
.hpanel.fullscreen .showhide {
display: none;
}
.hpanel.fullscreen .panel-body {
min-height: calc(100% - 77px);
}
Here's tool.module.js file, which animates the template:
import angular from "angular";
var ToolResource = require("workflow/tool/tool.service");
class ToolListController {
// #ngInject
constructor($location, $stateParams, $state, tools) {
this.$location = $location;
this.$state = $state;
this.$stateParams = $stateParams;
this.tools = tools;
}
}
// #ngInject
function routesList($stateProvider) {
$stateProvider.state("tool-list", {
url: "/tool",
parent: "layout",
templateUrl: "/app/workflow/tool/toolList.html",
controller: "ToolListController",
controllerAs: "vm",
data: {
pageTitle: "Tool",
pareDesc: "List of tools, available for workflow construction.",
},
resolve: {
ToolResource: "ToolResource",
tools: function(ToolResource) {
return ToolResource.query().$promise;
}
}
});
}
module.exports = angular.module("tool", [])
.service('ToolResource', ToolResource)
.controller('ToolListController', ToolListController)
.config(routesList);
tool.service.js:
module.exports = function ToolResource($resource) {
return $resource('/api/tool/:id', {id: '#id'});
}
ANSWER:
Community is awesome!
1.5 years ago this directive was created
12 days ago this bug was fixed by Alexryan in his fork
10 days ago I posted this question on StackOverflow
8 days ago I placed a bounty on this question
7 days ago ziscloud approved pull request
in the morning today the bounty expired and in the nick of time Walfrat found out that the bug was fixed
So, yes, it was a bug in the directive that made it draw itself before getting the data from server. With the bugfix I just added load-when="vm.tools" attribute to the directive and it works fine now.
Thank you, Alexryan, ziscloud, Walfrat and other commenters/answerers. StackOverflow and Github just made my day!
Are you using this directive ? https://github.com/ziscloud/angular-footable/blob/master/src/angular-footable.js. It's an homemade (meaning not done by the editor of the footable) directive so it can be not rightly implemented to works with Angularjs.
Looking at the code it seems that you have to use an attribute load-when if you want to delay the initialization of the grid even though you use the resolve attribute in your state, it can be worth to test it.load-when shall be an empty array at start an will trigger the load after the array won't be empty anymore, but the data binded won't be used for the initialization from what i saw.
Note : i wasn't able to set a proper plnkr myself, i don't know the version you're using (and with which jQuery version) and online links doesn't seems available.
Since you are asynchronously loading data (as was mentioned in the comments) your html is rendered prior to it having any data in it. This means the directive may be fired too early (if it is attempting to adapt based on data). Typically, in this scenario, you'll want to throw an ng-if on the portion of your html that is dependent on the data loading (and show a loading gif or something in its place). You can either run the ng-if off of the data itself being defined, or maintain a separate boolean that you set once the promise is resolved.
How to add line break in tooltip
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
Since angular-material version >1.1.2 you can simply override .md-tooltip class: (JsFiddle)
.md-tooltip {
height: auto;
}
And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions
Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>
into it.
md-tooltip .md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
md-tooltip {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
overflow: visible !important;
white-space: normal !important;
}
md-tooltip ._md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
My own overwrites to the material design styling to allow nice looking multi-line tooltips:
md-tooltip {
font-family: Roboto, 'Helvetica Neue', sans-serif;
.md-background {
border-radius: inherit;
}
.md-content {
height: auto;
width: 400px;
max-width: 400px;
padding: 8px;
white-space: initial;
}
}
#media screen and (min-width: 600px) {
md-tooltip .md-content {
font-size: 14px;
height: auto;
width: 300px;
padding: 8px;
max-width: 300px;
}
}
Or you can use white-space: pre-line; in the custom class of your md tooltip. :)
After a while searching for a solution FROM A VARIABLE CONTENT:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
See stackblitz example
I am using angular_material 1.1.8, for me single answer didn't work, a combination did.
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
Hope it helps..
angular material tool tip is warping all content in div so this its working
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
I'm having a really hard time understanding ngAnimate.
HTML:
<body ng-init="hide=false">
<button ng-click="hide=!hide">Toggle</button>
<div class="item" ng-hide="hide">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</body>
CSS:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.item {
padding: 40px;
background: orange;
margin-bottom: 50px;
transition: all linear 3s;
}
.item:hover {
background: red;
}
.item.ng-hide-add {
background: red;
}
Example: http://plnkr.co/edit/rixKjjvy4TUiu1r3MSFm?p=preview
The hover transition works fine, but the ng-hide-add doesn't animate at all.
I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}