Hello
Use the F7 example on the home page, select android, and than go to the menu widget. Scroll down : open the left menu, than the right menu. Compare the corners between the menu buttons and the dropdowns.
The left menu has a square corner while the right menu has a round corner
You have also the same behavior with the center menu.
Is this difference normal ? Is it a bug ?
I’m using a right menu with a custom color, and this round corner isn’t colored, it is still black.
I would suggest to use a square corner in both cases :
- you don’t have to code something to have a round corner
- user can easily use a custom color for the menu
Thank you.
How did you set green color there? It must be rounded, rounding on left menu will be fixed in next update. To correctly set menu bg color you need to use CSS variable --f7-menu-bg-color
Hello.
I just added the bg-color-green class to the necessary <div>
Here’s the code
<div class="menu-item menu-item-dropdown bg-color-green" style="position:absolute; z-index:1000; top:10px; right:10px;">
<div class="menu-item-content bg-color-green"><span class="fas fa-map"></span></div>
<!-- Dropdown container -->
<div class="menu-dropdown menu-dropdown-right bg-color-green">
<!-- Dropdown content -->
<div class="menu-dropdown-content bg-color-green">
<a href="#" id='map_roadmap' class="menu-dropdown-link menu-close">Roadmap</a>
</div>
</div>
</div>
The rounded shape is defined by a ::before to the container <div>. Its CSS rules are :
.menu-dropdown-right::before, .menu-item-dropdown-center .menu-dropdown::before, .menu-item-dropdown-right .menu-dropdown::before { background-image: radial-gradient(ellipse at 0% 0%,transparent 0%,transparent 70%,var(--f7-menu-bg-color) 72%); }
--f7-menu-bg-color is defined to rgba(0, 0, 0, 0.9), which is black with light transparency. That color is applied to the rounded shape whatever the menu bg color is. It can’t be simply customized using a bg-color class within a <div>.
Instead of var(--f7-menu-bg-color), the ::before should received the inherited bg color from the dropdown container <div class="menu-dropdown menu-dropdown-right bg-color-green">. That could be done with a few js lines.
var parent = document.closest( selecteurs );
For example, the rendering is correct if I manualy tweak the CSS rule to
background-image: radial-gradient(ellipse at 0% 0%,transparent 0%,transparent 70%,var(--f7-color-green) 72%);
You shouldn’t style complex elements with bg-color-... classes, just use CSS variables, and you can set it inline like: <div style="--f7-menu-bg-color: #0f0">
inherit color can’t be set in gradient images
1 Like
That does it ! Consider this topic solved. You’ve already noticed the bug in the left menu.
I didn’t meant the keyword inherit but inherited, by computing. I know that gradient can’t inherit a color, because there is no parent.
Thank you 
