Its a pretty simple scenario but i can't find an in-framework solution.
I have a link with text and an icon. On hover of the link the icon should get another color than the linktext.
<a href="#" class="block text-black hover:text-red"><i class="fa fa-icon text-grey hover:text-blue"></i>
The icon hover only triggers when the mouse is over it not the link as a whole.
I know i can still write custom classes in tailwind but this is such a basic problem that I hope someone knows a better solution.
Add group class to link and use group-hover: on the icon.
<script src="https://cdn.tailwindcss.com"></script>
<a href="#" class="block p-6 border group text-black hover:text-red">
<span class="text-grey group-hover:text-blue-500">icon</span>
</a>
Related
I am having trouble getting my anchor text and icon to look centered with Material 15.1.2
My layout looks like this:
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
<mat-nav-list>
<a mat-list-item routerLink="/signup">
<mat-icon>face</mat-icon>
<span matLine >Sign up</span>
</a>
The final result looks like:
I think the newer version is using flex where before it was using block. It also seems that the icon is 24px but the enclosing box is slightly bigger at 31px.
Trying to move the text with padding forces the whole block up and I can't move the anchor text up.
Any ideas?
I used display:inline-flex; to center the text as in the code below (I have used bootstrap).
<a mat-list-item routerLink="" >
<div class="d-inline-flex">
<mat-icon>face</mat-icon>
<span matLine>Sign up</span>
</div>
</a>
Is it possible to achieve something like facebook's notifications icon with Semantic UI? I.e. an icon with a red Label to show the number of notifications? Found this thread but no answers there.
I tried this:
<Icon name='bell outline'>
<Label color='red' floating>22</Label>
</Icon>
But the label doesn't show up (syntax is semantic-ui-react).
With Semantic UI you can make another icon float to the right upper corner:
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="top right corner add icon"></i>
</i>
but it does't help in case you want to display some number in the corner- for intance, the number of followers or the number of messages. If you want to achieve it you have to use your own css styling.
In my project I do it in following way:
<div class="ui top dropdown item">
<i class="icon bell outline"></i>
<div id="live_message_badge_main_header" class="floating ui red label hidden" style="padding:2px 3px;top: 10px;left: 47px;">
<span class='live_message_badge'> </span>
</div>
</div>
Additionally, you need corresponding js which will fill the span.
Result:
I would like to achieve a mobile menu which is always visible on the bottom of my page. I don't know if there is a specific name for such menus but I've found a page which does exactly this menu:
What is the best way to achieve exactly this for tablet and smaller devices using materialize?
There is something called a Toolbar in Materialize.
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><i class="material-icons">insert_chart</i></li>
<li class="waves-effect waves-light"><i class="material-icons">format_quote</i></li>
<li class="waves-effect waves-light"><i class="material-icons">publish</i></li>
<li class="waves-effect waves-light"><i class="material-icons">attach_file</i></li>
</ul>
</div>
But it's not the same what you are looking for. You have to modify this or you need to create your own.
Fab for toolbar:
http://materializecss.com/buttons.html
Have you tried to use CSS, select the whole menu by class or id and set it to position fixed?
#fixedMenu{
position:fixed;
}
You can then play around as the where exactly you want to place it. By using width or margins set to auto then you can make it responsive for different viewports.
I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Dropdown Image
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
LIVE DEMO
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:
$enable-caret: false;
This overrides the default value of true set in the Bootstrap's _variable.scss:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
I found you can do this within your app on a conditional basis by creating a custom class in styles.css
Note that using "!important;" is required or else elements at the bottom of the screen will still have a caret that points upward:
.remove-caret::after {
display: none !important;
}
html example with the custom class and replacing the icon with an ellipsis:
<div style="margin: auto; text-align: center">
<ul class="navbar-nav" [style.display]="'flex'">
<li class="nav-item d-inline-block" ngbDropdown>
<a class="nav-link dropdown-toggle remove-caret" style="color:#000; font-size: 1.1rem" ngbDropdownToggle href="#" role="button" aria-haspopup="true"
aria-expanded="false"><fa-icon [icon]="faEllipsisH" class="ml-2"></fa-icon></a>
<div ngbDropdownMenu aria-labelled-by="menuDropDown">
<a ngbDropdownItem href="#" (click)="test()">Test</a>
</div>
</li>
</ul>
</div>
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>