CSS help please - how to change a Button Bar component

I have searched the CodeBook and the Notion for the CSS, but I have missed it somehow.

Use case:

  • I have a button bar at the bottom of my onboarding screens
  • I would like to make the distance between the tow buttons larger - so they are not really in the middle, but more towards the side.

Any ideas? Thanks!

1 Like

Not the response you are looking for but just an input on the text displayed on the screen…

It should be

“It is contains a QR code connected to our database, so you can PROVE its validity”

“The whole process TAKES less than 30 Min”.

Just to correct the grammar. I hope you don’t take this otherwise…

2 Likes

Just correcting your correction…

“It is” should be “It”

:stuck_out_tongue_closed_eyes::joy:

3 Likes

None taken! :slight_smile: thank you :slight_smile:

Controlling a double button via CSS is really difficult; if after your buttons there are no other components further down (which I currently don’t see), an idea might be to use two separate float buttons and place them towards the bottom corners of the screen. Left and bottom right I mean.
I’ve never done this but it might work, let me know if it’s a solution that can work for you then I’ll experiment.

2 Likes

The float buttons are a good idea :slight_smile: I had floating buttons on the right side to start with forward and back, but I changed my mind about the UX at some point. I will have a quick go and see if I have any success - thanks for the idea!

And this screen is always fixed, so I could reference a nth component quite easily.

1 Like

you’re welcome

That one is not mine actually but it’s the forum that did that…

My corrections are in “UPPERCASE” but thank you for pointing that out :stuck_out_tongue_winking_eye::blush::hugs::joy:

1 Like

Just while we’re all in grammar nazi mode…

UX = User Experience
UI = User Interface

Every time you type UX when you really mean UI, a kitten dies somewhere :stuck_out_tongue:

2 Likes

actually I was thinking of the experience navigating (UX) which was being translated into the interface (I). So no kittens have died (this time) :wink:

1 Like

I’ll send you some CSS in a bit, the issue comes again between tablet and phone view

1 Like

:joy::hugs: “No kittens have died…”

I built this a while ago. Hope it helps. It’s 2 floating buttons.

<pre><span><style>

.fab-target >* {
	 position:fixed;
	 width:50px;
	 height:50px;
	 bottom: 10%;
}

.fab-target >:nth-child(1) {
left: 70% !important;
}

.fab-target >:nth-child(2) {
right: 70% !important;
}
3 Likes

This works - but then I have the problem of background color (easy) and icon foreground color (seems to be harder).

In the end, @PabloMFalero helped me out with some CSS for the button bar - works a treat!

Thanks all :slight_smile:

<pre><span><style>
[data-test = "app-button-view"]> div> div {
}
div[id*='screenScrollView'] > div > :nth-child(7) {
margin-top:10px;
margin-left:-4%;
transform: translateX(-20%);
width:180%;
height:50px;
}


3 Likes

Always happy to help :slight_smile:

1 Like

I want custom icon to my floating button . Can any CSS expert assist me please ?

Dont think thats possible. You’ll need to create a custom button, but you’ll lose the ability to add an action other that open an external link.

1 Like

Ok sir Thank you . But How to create custom button ? .I don’t know the CSS . But I’m good in Adobe work. Actually I want to button design in adobe and add the actions to it . Can you please tell me on your free time about custom button ?

Not sure how to create a button using Adobe. I just used HTML to create the button and CSS to style is. You might be able to add an image created in Adobe via html in Richtext and add an Action to that?