英文:
How do I make ion-menu-button larger in md(Android) mode?
问题
I changed the font-size of my ion-menu-button (hamburger button) using the following CSS code.
ion-menu-button {
font-size: 31px !important;
}
The above code seems to work on my app in ios mode. (See attached screenshot)
But that was not the case when I tried running the app on md mode(Android). The hamburger button is still small even and the CSS code doesn't have an impact (See attached screenshot)
Some fixes I tried include adding a CSS with .md class to target the hamburger button specifically but it didn't work.
I tried fixing my problem by applying this code from Stack Overflow: How do I make ion-menu-button larger?
After applying the fix above, the hamburger button now has the right size but the toolbar appears to become larger and I don't want my toolbar to look larger that's why I reverted the fix and was hoping someone could help me solve my issue. (See attached screenshot)
英文:
I changed the font-size of my ion-menu-button (hamburger button) using the following CSS code.
ion-menu-button {
font-size: 31px !important;
}
The above code seems to work on my app in ios mode. (See attached screenshot)
But that was not the case when I tried running the app on md mode(Android). The hamburger button is still small even and the CSS code doesn't have an impact (See attached screenshot)
Some fixes I tried include adding a CSS with .md class to target the hamburger button specifically but it didn't work.
I tried fixing my problem by applying this code from Stack Overflow: How do I make ion-menu-button larger?
After applying the fix above, the hamburger button now has the right size but the toolbar appears to become larger and I don't want my toolbar to look larger that's why I reverted the fix and was hoping someone could help me solve my issue. (See attached screenshot)
答案1
得分: 0
ion-menu-button {
zoom: 1.8;
}
英文:
Simply by using the zoom property:
ion-menu-button {
zoom: 1.8;
}
答案2
得分: 0
谢谢您提供的反馈。我通过将 class="ion-no-padding ion-no-margin" 添加到我的 <ion-menu-button> 中,成功解决了我的问题。我不太确定它是如何工作的,但我对这个解决方法感到满意。我的最终代码是:
<ion-menu-button auto-hide="false" class="ion-no-padding ion-no-margin"></ion-menu-button>
英文:
Thank you for all of your feedbacks. I was able to find a solution to my problem by adding class="ion-no-padding ion-no-margin" to my <ion-menu-button>. I'm not exactly sure how it work but I'm satisfied with this workaround. My final code is:
<ion-menu-button auto-hide="false" class="ion-no-padding ion-no-margin"></ion-menu-button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论