Adding icon adds extra space before render

1
  • Framework7 version: 7.1.5
  • Platform and Target: All Browser
  • Live Link or CodeSandbox: CodeSandbox

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;
}
2

call:

$f7router.removeThemeElements(page.$el);

right after you insert el in dom
or just let vdom handle dom-manipulation

3

Where is the documentation for removeThemeElements ?
I didn’t find it.

4
5

That work really good, i think it’s better add that function in the official docs (website).

6

docs is for beginners, you should read source.

7

I don’t agree, I’m always of the opinion that the more detailed the documentation, the less time you waste doing things.

I take the opportunity to ask you, when an actionSheet is opened that has an icon can this method be used and above all why is this step not automatic in your opinion?

Example code:

$f7.actions.create({       
.....                    
    {
        text: 'Edit',
        icon: '<i class="f7-icons if-not-md">pencil</i><i class="material-icons md-only">mode_edit</i>'
    },
.....

For now i resolve in the app setting:

actions: {
    on: {
        open: function () {
            app.router.removeThemeElements(this.$el[0]);
......
8

using f7 correctly, there is no need for that func (among other).
we don’t manipulate dom directly anymore, we (also) usually do it wrong.
let vdom handle your dom by simply calling $update().

i that specific case you don’t really need to removeThemeElements,
there is no css rule .actions-button-media i + i.

you can avoid all of this by using actions-routableModal

9

The problem exist because there’s the option convertToPopover:true.

And $update() doesn’t work if i create html (for example html of table), icon will be two always.

10

i see.

works.

anyway:
what if you really want to show 2 icons?

11

I will create a snippet for you so you can correct me if i am wrong.

I don’t think there is a valid reason to have two icons attached, the icon theoretically serves to make the user understand what that button/action is for without using text.
And the main problem of the double icon is on the MD/not-MD icon itself

12

i know

then just override the css rule:

.item-media i + i {
   margin-left: unset;
}
13

As you can see from here using update() does not work, the icon will always be two with margin.

14

i see.
You’re right, my mistake.
here => quizzical-cartwright-bci40h - CodeSandbox

1 Like
15

This can work with something easy like list, but for example using a list with accordion it’s impossible to use update. I will use removeThemeElements to fix this (thanks for now :slight_smile: )

16

accordion => quizzical-cartwright-bci40h - CodeSandbox