<div class="text-content" *ngFor="let user of items | async">
<div class="user">
<span>user</span>
<p>{{user.some}}</p>
<div class="comment-line"></div>
<div class="comment">
<i *ngIf="user.hasOwnProperty(uid)" class="material-icons" id="favorite" (click)="dislike(user.key, uid)">favorite</i>
<i *ngIf="!user.hasOwnProperty(uid)" class="material-icons" id="favorite_border" (click)="like(user.key, uid)">favorite_border</i>
</div>
</div>
I want to animate only one icon with CSS transition, only one not all the rest icon. Any solution?
Related
I am new to Semantic and I would like to use the menu look like the sidebar. As in I want the Menu to look like how it would if the sidebar is visible.
I had the same problem as this question, and the solution suggests to use menu instead of sidebar. But I am lost trying to implement this.
I used the same example as in the semantic-ui website.
<div class="d-flex pushable">
<div class="ui left vertical inverted sidebar labeled icon menu visible">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
<div class="pusher">
<router-outlet></router-outlet>
</div>
</div>
Any help is appreciated.
I'm trying to create a simple bootstrap 4 navigation navbar with my logo centered and a fontawesome menu icon aligned to left and a button aligned to the right.
In my code I have created 3 columns (5, 2 and 5). It works fine if I remove the nav part, but within the nav, it collapses and doesn't take up the full width. I've read that it is because bootstrap 4 uses flex. I have tried adding the class w-100 to the row, which nearly works, but it then has a small padding on the right of the navigation which causes the logo to not be exactly centered.
<nav class="navbar bg-dark">
<div class="row">
<div class="col-5 text-left bg-warning">
<i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i>
</div>
<div class="col-2 bg-success text-center">
Logo
</div>
<div class="col-5 text-right bg-info">
<a class="btn btn-primary" href="#" role="button">Sign Up</a>
</div>
</div>
Does anyone know how to get this to work using flex? I want to be able to possibly add another button or icon in the right column as well, but still have the logo exactly in the center of the screen.
************* UPDATE **************
I have now got it to work using flex, but I have had to add the style such as "flex: 1 0 40%;" to each of the 3 divs, 40% to the left and right div and 20% to the middle/logo div. The code doesn't look ideal but it does work.
<nav class="navbar bg-light">
<div class="d-flex w-100">
<div class="my-auto" style="flex: 1 0 40%;">
<i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i>
</div>
<div class="text-center" style="flex: 1 0 20%;">
Logo
</div>
<div class="my-auto text-right" style="flex: 1 0 40%;">
<a class="btn btn-sm btn-watermelon" href="#" role="button">Sign Up</a>
</div>
</div>
</nav>
The .navbar class adds padding: .5rem 1rem; style rule to the nav element. The "Logo" text is not centered, because of the .navbar-brand class, that adds margin-right: 1rem; Adding content to a column does not change the size of it.
Add these classes to the elements:
<nav class="navbar bg-dark pr-0 pl-0">
...
Logo
...
</nav>
The class pl-0 and pr-0 will set the left and right paddings to 0, while m-0 will remove all margins.
Here is a very nice cheat-sheat for bootstrap 4
THis is it:
<div class="container">
<nav class="navbar bg-dark">
<a href="" data-toggle="modal" class="navbar-toggler" data-
target="#exampleModal"><i
class="fas fa-bars text-primary pointer btn btn-warning" style="font-
size: 28px;"></i></a>
Logo
<a class="btn btn-info" href="#" role="button">Sign Up</a>
</div>
check:https://jsfiddle.net/sugandhnikhil/gn89rj5p/
I have this code:
<div class="panel-heading clearfix">
<div class="col-md-11 left">
<button style="display: inline-block;" type="button" class="btn btn-success btn-circle"> <i class="fab fa-twitter"></i></button>
<h3 style="display: inline-block;" class="panel-title uppercased green"> Twitter</h3>
</div>
<div class="col-md-1">
<span class="clickable right"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</div>
</div>
I have a problem to center vertically col-md-1 and span with font-awesome chevron icon.
This is an image
This is beacuse the button inside the left div has a certain height that affects also the element on the right.
Just add a line-height equals to the height of the green button:
.clickable i {
line-height: 34px;
}
I also fixed your typo in icon class. There's an extra 'b' that causes the non-rendering of the twitter icon.
<i class="fa fa-twitter"></i>
I have updated the codepen.
I add a wrapper and background color, so you can easily see that now it's aligned correctly.
I would like to open the dropdown to the left of the link opening the dropdown, so it is visible on tiny screens like iPhone has. Is there some standard way to do it?
Here is my dropdown definition - it would be nice to get some setting(class) telling the dropdown to align right, not left side with the link.
<div class="four wide mobile three wide computer column">
<div class="ui compact dropdown doNotClose">
<i class="dropdown icon"></i>
<span class="ui tiny header">Filters</span>
<div class="menu">
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Acknowledge</label>
</div>
</div>
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Active</label>
</div>
</div>
</div>
</div>
</div>
It is possible to do it by adding pointing class to the dropdown.
You can find a JSFiddle example here: http://jsfiddle.net/ypvpajrL/
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3645
Add this style next to menu class
style="right: 0;left: auto;"
example;
<div class="ui simple dropdown icon button" style="margin:0;">
<i class="calendar icon"></i>
Date
<div class="menu" style="right: 0;left: auto;">
<a class="ui item">Today</a>
<a class="ui item">Yesterday</a>
</div>
</div>
I want to build a nav menu. I want it to be tall, and I want to split it horizontally in two. Then I want the left part to have something aligned to the bottom of the menu. The right part should have the nav links and be middle-aligned. I want to use as less css as possible. (I am also working with Angular Material and Bootstrap if that helps). Here is the plunkr. I have already checked out this checkit but I am looking for another option.
<div class="menu container-fluid">
<md-toolbar class="md-tall">
<div class="container">
<div layout="row">
<!--Left-->
<div layout="row">
<md-button aria-label="Settings" class="shownSm">
<ng-md-icon icon="menu" ng-click="main.small =!main.small" style="fill: #fefefe;"></ng-md-icon>
</md-button>
<div layout="column">
<span flex></span>
<span>
<small>Some name</small>
</span>
<span>
<small>Something else</small>
</span>
</div>
</div>
<span flex=""></span>
<!--Right-->
<div class="right" layout="column">
<span flex=""></span>
<div layout="row" class="hiddenSm">
<ul class="text-center">
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
</ul>
</div>
</div>
</div>
</div>
</md-toolbar>
</div>