framework7io / framework7

Full featured HTML framework for building iOS & Android apps
http://framework7.io
MIT License
18.04k stars 3.23k forks source link

Adding icon adds extra space before render #4144

Closed Simone4e closed 1 year ago

Simone4e commented 1 year ago

Describe the bug

By adding an element with the double icon (according to the theme) instead of rendering only the correct icon, the incorrect one is also rendered by putting an extra space

To Reproduce

Steps to reproduce the behavior:

  1. Go to Codesandbox
  2. Click on + icon
  3. See extra space cause by icon

Expected behavior

I would expect the icon to not take up any space

Found problem:

In the actually <i> visible there is a rule in css :

.list .item-media i + i, .list .item-media i + img {
   margin-left: var(--f7-list-item-media-icons-margin);
}

If i add this rule seems work like:

.md .list .item-media i + i {
   margin-left: 0;
}
Simone4e commented 1 year ago

Close from here

$f7router.removeThemeElements(page.$el);