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