To delete a button takes a long time

I have 138 buttons on one panel. When I delete a key there, it takes 1 minute and 14 seconds to happen. Is this because I have pictures on my keys?
Cheers Denis

Can you upload your session file ?

Here are both files ("load" and "custom-module")
It is the panel (panel_2A_visibility_CH14)

Session.zip (1.1 MB)

The images seem to slow down the session a lot, it might help to avoid using base64 encoded images and to put them in a folder next to your session file. In general, it's better to put as much css as possible in a theme file to avoid code duplication too. I'd also advise using grid/vertical/horizontal layouts instead of using absolute coordinates everywhere. When possible, using tabs to manage the visibility of big portions of the UI is better (inactive tabs have a lesser impact on performances than invisible panels).

1 Like

Thank you very much to check that out...
I will try to implement your suggestions.
Do you have a god example, how to integrate an image? (If not base64, do i have to use a jpeg instead?)
Cheers

Any type will do, jpg is fine. Put the image in a a folder next to the theme file, set the css property to something like

class: my-button;
class: image-horns;

and in the theme file:

.my-button {
  /* some generic rules you don't want to write multiple times */
}
.image-horns label {
  background-image: url(folder/horns.jpg);
  /* etc */
}

Thanks for that...
A last question: Here is my example with 3 pictures.

.pic-button {
    padding: 2px 2px 2px 2px;
    font-size: 70%;
    line-height: 8px;
}

.p14-062 label {
    background-image: url(pictures/OT_timeMacro.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%; 
}
.p14-064 label {
    background-image: url(pictures/OT_salu.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%; 
}
.p14-070 label {
    background-image: url(pictures/OT_igudesmanSoloViolin.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%; 
}

To shorten this. Is it possible to define in the css itself a variable like

variableA = {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%; 
}

only to shorten the picture entry to something like that?

.p14-062 label {
    background-image: url(pictures/OT_timeMacro.jpg);
    variableA 
}

Is that possible?

No, css doesn't support that (the syntax is well documented online), but you could write

.pic-button label {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%; 
}

Ah… super… many thanks for that. It works perfect…