Resize Action button width in a list block

Ask the community
1

Hi all, new to the community and building a SaaS marketplace app for external users.

I’m sure will have many questions going forward, but the first one is:

how do I reduce the width of the action button (I don’t need it to be so big)

And once it’s width is reduced, how would I align it left, center, or right?

Screenshot at Sep 26 19-26-35
Screenshot at Sep 26 19-26-35906×447 299 KB

Thanks!

2

I tried using chatgpt to help, but not sure this code is correct (or where exactly to put the code)

image
image811×814 95.5 KB

3

Hi,

Do you have a top bar button in your list block? Or only one button inside the cards?

4

Yes I have this “Add event” button at the top - though I’m not 100% certain I’ll be keeping it. But I assume because I have it, whatever code is necessary to change button width would also change that button width unless otherwise specified?

image

5

Exactly,

If you remove the top bar button the code is:
list1 to be replaced by your actual block Id

<style>
#list1 .nw87ex7.nw87ex8 {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 50% !important;
}

</style>

This makes the button 50% smaller (for its width) and aligned on the left.
To align the button to the right:

<style>
#list1 .nw87ex7.nw87ex8 {
  margin-left: auto !important;
  margin-right: 0 !important;
  max-width: 50% !important;
}

</style>

To make it centered:

<style>
#list1 .nw87ex7.nw87ex8 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 50% !important;
}

</style>

If you want to keep the top bar button you will need to look into the dev inspector and find the data-action-id of your buttons in the card (same data-action-id for all buttons in the cards)

For example, in my test case, with one of my list blocks the code would be:

<style>
#list1 .nw87ex7.nw87ex8[data-action-id="_26a7nmtdj"] {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 50% !important;
}

</style>
6

thanks so much I’m going to play with this, but where do I actually put this code? Into:

  1. general settings header/footer
  2. page settings “custom code”
  3. custom code block in the list block page itself

apologies for rookie questions still getting the hang of things here

7

To be added in the page settings => custom code => Code inside header

8

both versions worked, thanks so much

is there an educational resource available where I can try to teach myself how to do these minor edits myself?

9

Nope, all is in my brain :sweat_smile: and in my repository (which I don’t share as I am a paid developer).

Learning code is necessary, (I can recommend https://coddy.tech/).
Otherwise you can look for many posts about custom code in the Softr community, and then practice a lot.

Releasing a “Code in Softr” course is in my head, but it won’t come out before… I don’t know when.

10

Understood, and appreciate you answering questions here

I’ll check out coddy.tech. Looks like they offer quite a few languages - any specific to start/focus on?

11

HTML 1st, CSS then, Javascript for Final.

For design, like what you asked in this thread => mostly HTML and CSS.

1 Like
12

Hello i tried to do the same thing but it doesn’t work for me,

i tried this :

#list-details61 [data-softr-action-type="UPDATE_RECORD"] {
 min-width: 100% !important;
 }

and i tried with :

#list-details61 [data-testid="button"] {
 min-width: 100% !important;
}

but both get no results :confused:

Any tips ?

Thank you : )

13

Is it an update record button or a one click update record button?

14

It’s an edit record, not a one click update

<button class="_39fd1f8_nw87ex7 _39fd1f8_nw87ex8" data-testid="button" data-loading="false" data-disabled="false" aria-busy="false" data-roundness="SMOOTH" data-size="M" font-family="Inter" fallback="[object Object]" data-action-id="_u96av7ree" data-softr-action-type="UPDATE_RECORD" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls=":r1k:" style="--_39fd1f8_nw87ex0: #232323; --_39fd1f8_nw87ex1: #383838; --_39fd1f8_nw87ex2: #4f4f4f; --_39fd1f8_nw87ex3: #ffffff; --_39fd1f8_nw87ex4: #0074d2; --_39fd1f8_nw87ex5: none; --_39fd1f8_nw87ex6: 500; pointer-events: initial; --_39fd1f8_1es1u5v1s: Inter;"><div data-testid="button-icon-container" class="_39fd1f8_nw87exf"><div style="display: flex; flex: 0 0 auto; width: 1em; height: 1em;"></div></div><div class="_39fd1f8_nw87exg">Ajouter ou Modifier</div></button>

if i add min-width: 100% in inspector it’s work, but not in softr :confused:

15

There is no reason why this code should not work. It works perfectly on my end.
Maybe refresh the softr studio and empty your browser cache.
Also, be sure it’s #list-details61 (we never know)
I also assume we’re talking of a list-details and not a list block.

<style>
#list-details61 [data-softr-action-type="UPDATE_RECORD"] {
 min-width: 100% !important;
 }
</style>