CSS: Choice component as a menu

Ask for Help
21

You can create the same functionality in Pages, but you don’t have the CSS styling options.

22

Could you perhaps give me a clue on how this would work?

Screenshot 2023-02-21 at 11.44.50
Screenshot 2023-02-21 at 11.44.50664×948 66.7 KB

here is the tabs im trying to style a bit better (general/timeline/sales/profile)

23

So you want the content below to change based on which choice is selected, yes?

There are a few ways to approach it. A fairly simple approach would be to use visibility conditions. So configure 4 containers, one for each of the options. And then set the visibility condition on each container such that it is only visible when the associated choice value is selected.

24

Hi Darren,

Apologies, i have managed to set the visibility via the choice component succesfully - however, what im trying to do is, style the choices to look more like tabs instead of the current circled boxes . im not sure how to do this in pages?

25

Unless you’re on a business or enterprise plan, that’s not possible I’m afraid.

I think the closest you could get would be to replace the choice component with 4 rich text components and apply inline styling (which can be done in Pages)

1 Like
26

thanks alot let me give that a go…

27

Could you please share an example of such component?

28

Well, I’m no CSS wizard, but is this something like the effect you’re looking for?

CleanShot 2023-02-24 at 19.50.28

29

Foresure, it looks much better than the round button ones

30

Okay, so what you see there is a 4 column container, with each container having 2 rich text components. You need 2 in each container - one for when the button is selected, and one for when it isn’t.

The HTML with inline CSS that I used for each:

Selected:

<center>
<span style="
	background-color: #4DB0D5;
	border: none;
    border-bottom: blue solid 4px;
    color: white;
    padding: 10px 50px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
">General</span>

Not selected:

<center>
<span style="
	background-color: #4DB0D5;
	border: none;
    color: white;
    padding: 10px 50px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
">General</span>

The only difference between the two is the border-bottom property, to add and remove the horizontal line at the bottom.

Obviously, you could tweak that to your liking.

To get the select/deselect effect, it’s just a matter of combining actions and visibility conditions. This is how I did it:

  • Each of the button pairs has an associated user specific boolean column. One button is visible when the column is checked, and the other is shown when it is not.
  • All 8 buttons have an associated actions. The odd numbered pairs set the associated boolean to true, and clear the other 3. The even numbered pairs clear all 4 booleans.

To make them work like a choice component, you’d just need to extend the actions on the odd numbered pairs to set the user specific column that your choice component otherwise would have.

3 Likes
31

do you think there is a way to ensure the buttons present next to each other? i played around on mobile view with the container columns but it seems to default to below each other on mobile view?

32

I’m not sure what your layout is, but if there isn’t enough space in a container column then it will get pushed to the next row. If you think your device still have enough space then that’s a bug.