Topic: Is there any way to increase the size of Icons in "Select with icons"?
Venky pro asked 5 years ago
Is there any way to increase the size of Icons in "Select with icons"?
I have tried to change the styles manually but those are getting applied. But I could change the styles in browser inspect element. When I trying to apply the same style, changes are not reflecting.
Please let us know a way to increase the icon size for Select with Icon.
Many thanks, Venky
Damian Gemza staff answered 5 years ago
Venky,
You always can add some additional class to the mdb-select
element in which you want to change the icons size, and then in styles.scss file change styles only for element with this class.
Please take a look at the below code:
.html:
<mdb-select class="change-icons" [options]="iconsSelect" placeholder="Choose your option" label="Example label"></mdb-select>
.scss:
mdb-select.change-icons ul.select-dropdown {
li {
height: 60px !important;
line-height: 60px !important;
img {
height: 50px;
width: 50px;
}
}
}
Best Regards,
Damian
Damian Gemza staff answered 5 years ago
Dear Venky,
Please try to add the below styles to the styles.scss
file in your application:
ul.select-dropdown {
li {
height: 60px !important;
line-height: 60px !important;
img {
height: 50px;
width: 50px;
}
}
}
Those styles in the styles.scss
main stylesheet should work in your app. If not, please let me know.
Best Regards,
Damian
Venky pro commented 5 years ago
It works but it will reflect to all of the website selects(drop-downs). Can we have attribute or class at element level? To manage size without effecting other components.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.1
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No