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