Resize Action button width in a list block

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?

Thanks!

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

Hi,

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

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

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>

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

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

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?

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.

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?

HTML 1st, CSS then, Javascript for Final.

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

1 Like