I am displaying font awesome icons in row. when I click an icon it takes an action. and also I was trying to seelct an icon then it should show the option,when I click the option it should take an action.
Here is my code.
<div class="iconsInfo">
<div>
<div ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</div>
<div ng-if="isReplyAll()"ng-click="replyAll()" class="iconRow" title="Reply All">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="isForward()" ng-click="forwardMessage()" class="iconRow" title="Forward">
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeleted()" ng-click="deleteMessage()" class="iconRow" title="Delete Message">
<i class="fa fa-trash"></i>
</div>
<div ng-show="canMoveToFolder()" class="iconRow">
<i class="fa fa-folder-o"> </i>
</div>
Here when I click on reply icon it calls replyMessage .when I click on folder icon it should show the options like sentToFolder1,sentToFolder2,when I click senttoFolder1 it calls an action. how to achieve this using fontawesome icons.
Using a button over a div would be a solution:
<button ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</button>
You may need to change your iconRow class a bit, depending on what it is. Based on the name, I imagine perhaps the wrapper would be a good place for the iconRow styling.
Related
I have the following movie element:
And this is the corresponding HTML:
<div class="bottom d-flex">
<div class="video-controls time-segment p-2">
<button class="btn-control btn-"><span class="fa fa-undo"></span></button>
<button class="btn-control btn-step-backward"><span
class="fa fa-step-backward"></span></button>
<button *ngIf="!widget.moviePlaying" class="btn-control btn-play" (click)="playPauseMovie(widget)"><span class="fa fa-play"></span></button>
<button *ngIf="widget.moviePlaying" class="btn-control btn-pause" (click)="playPauseMovie(widget)"><span class="fa fa-pause"></span></button>
<button class="btn-control btn-step-forward"><span
class="fa fa-step-forward"></span></button>
<button class="btn-control btn-reset" hidden><span class="fa fa-undo"></span></button>
</div>
<div id="frames-indicator">
<span id="seekBarLabel">Frame {{ moviesFrames.current }}/{{ moviesFrames.total }}</span>
</div>
<div class="widget-controls ml-auto">
<button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
class="fa fa-clone"></span></button>
<button *ngIf="!widget.linked" class="btn-control btn-" (click)="toggleLinked(widget)"><span
class="fa fa-chain-broken"></span></button>
<button *ngIf="widget.linked" class="btn-control btn-step-backward" (click)="toggleLinked(widget)"><span class="fa fa-link"></span></button>
<button class="btn-control btn-play" (click)="setSize(widget, -1, $event, gridster1)"><span
class="fa fa-minus"></span></button>
<button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
class="fa fa-plus"></span></button>
</div>
</div>
As you can see:
div container has class="bottom d-flex"
div 1 has class class="video-controls time-segment p-2" and host buttons
div 2 just contain a span element
div 3 is right aligned and host buttons
I want div 1 and 3 to 'expand their width to display all buttons inline. I have tried width: max-content with no luck.
Any idea in how to achieve my goal?
SOLUTION
Thank you to everyone for trying to help. In the end I did not need to manipulate the CSS. The media breakpoint settings were wrong. I was generated the same number of movies per line in medium and large screens. On Medium screens the movies were too narrow causing the icons to stack vertically.
Posting my own solution in case might help someone.
Thank you to everyone for trying to help. In the end I did not need to manipulate the CSS. The media breakpoint settings were wrong. I was generated the same number of movies per line in medium and large screens. On Medium screens the movies were too narrow causing the icons to stack vertically.
I have used CSS3 code for circle navigation, its working fine for single level menu but i need sub menu navigation, Please check my jsfiddlel
<div id="Cmenu_wrap_left"><input type="checkbox" id="Cmenu_menu_left"><div id="Cmenu_circle"><i class="fa fa-clock-o"></i><i class="fa fa-plus-circle" ></i><i class="fa fa-pie-chart"></i><i class="fa fa-cog"></i><i class="fa fa-picture-o"></i><i class="fa fa-map-marker"></i><i class="fa fa-plus-circle" ></i></div>
At first, this question shouldn't be that hard, but I don't know how to solve it.
I'm experimenting with Font-Awesome and everything works fine, except that it won't display just one icon.
Inside the Hml-Editor (Atom):
<body>
<div class="list">
<i class="fa fa-fw fa-home"</i><span>test</span>
</div><!--list-->
</body>
Inside the Browser:
<body>
<div class="list">
<i class="fa fa-fw fa-home" <="" i=""><span>test</span></i><i class="fa fa-fw fa-home" <="" i="">
</i></div><!--list--><i class="fa fa-fw fa-home" <="" i="">
</i>
</body>
Why's there more code in the Browser?
the code is saved with the Atom-Editor and this appears also in a freshly opened Chrome-window (same with Firefox)
Is this even a Browser problem?
After all this seems awkward but thanks for your help.
Your HTML is invalid, the opening i element never gets closed.
Try this:
<body>
<div class="list">
<i class="fa fa-fw fa-home"></i><span>test</span>
</div><!--list-->
</body>
Consider installing htmlhint to get notified about invalid HTML.
I want to show a button with btn-lg size in extra small devices. and show same button with btn-xs size in another devices.
So is there better suggestion of below code?
<div class="hidden-xs">
<a class="btn btn-default btn-xs" href="#"><i class="fa fa-undo" aria-hidden="true"></i> Back</a>
</div>
<div class="visible-xs-block">
<a class="btn btn-default btn-lg" href="#"><i class="fa fa-undo" aria-hidden="true"></i> Back</a>
</div>
Given that I may have a piece of code is much bigger than a button code. Like this:
<div class="hidden-xs">
<!-- A LONG AND COMPLEX CODE IN HERE -->
</div>
<div class="visible-xs-block">
<!-- SAME LONG AND COMPLEX CODE IN HERE (with just change some classes of size) -->
</div>
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }