Customize the border of your Softr Modal / Popup

Custom Coding
, ,
3

By creating a hardcoded popup modal I guess.

Or use a modal/popup from shoelace.style. Opening a modal “made in softr” from a custom button wouldn’t be possible. At least I have 0 idea on how to do it.

That being said I advise not using custom buttons, specifically if they have to open a modal. As now this is something Softr can do, this would be a work overload.

1 Like
4

Is there a way to make this work on list buttons? It seems like it does not amend if I have a button in a list or if there is multiple buttons:)

For example on “List with horizontal cards”.

5

It is not supposed to be related to buttons at all, it’s just the modal style. The modal coming out of a list with horizontal cards may be different, I have to check

6

I implemented this the places it worked, looks amazing:)

7

But you confirm it doesn’t work when clicking a button on a list with horizontal cards (to open a modal, of course)?

8

Correct yes!

9

What is the size of the modal you want to open? S ? M ? L ?

10

Most are M some are L :slight_smile:

11

You will need to change this line of code (I updated the post)

1 Like
12

Superstar! Thank you :slight_smile:

13

This made a huge UI difference. Amazing how such a small detail can make something 10x more pretty.

14

I agree :joy:

1 Like
15

Doesn’t work for me. The style remains the same. FYI my modal opens from a click on a list item.

16

It works in this case too, I need more details to debug (what code, what list, where is the code ,screenshots)

17

  • list: “List with horizontal cards and visible button”

  • code: exactly what you mentioned above

  • where is the code: in the custom header of the page the list is on.

  • screenshot: I’m not gonna put a screenshot here, the modal is just unchanged.

  • item on click: open modal

  • page to open: a standard softr page with a little more info about that item.

  • size: L

  • No error in the console

18

So it should work :man_shrugging:, because it does. Erik has the same list, it works. I did tests with item on click, it works.

Did you check this Customize the border of your Softr Modal / Popup - #11 by matthieu_chateau

An example here: https://test-play.softr.app/

There must be an error on your side, it perfectly works. Maybe your block needs an update or there is a little error in the code that you can’t see or I don’t know, but nothing to do on my side, I’m sure of this

1 Like
19

Yes, it works fine, I didn’t see that you actually needed to change that line of code depending on your modal size.

Thanks Matthieu!

1 Like
20

I just watched the tetris movie on apple TV, and this is glorious :laughing: love the easter egg

image
image946×584 21.4 KB

21

@matthieu_chateau is there a way to add my logo as a header to a modal?

22

Hi Lauren,

If it’s a modal leading to another page, yes, you just need to add whatever you want inside the page.

If it’s a modal related to an action button of a dynamic block (add record action, delete record action, update record action) => not possible