CSS Gurus? How to achieve this?

Coffee Lounge
1

I’m no CSS expert. Infact I’m no expert at all hahaha…

We would like to create something along the lines of the following Configuration page for System 76 laptop specifications. Has anybody got a pointer on achieving this? We want the select options to remain highlighted, if another option selected highlight and drop the previous etc.

Much appreciated for any advice, tips, demonstration!

:slight_smile:

2

We have used focus but obviously when the second group of options is displayed it then changes the focus to them and removes the focus from the previous option selection…

3

You want something like this.

<div class="btn-group-toggle btn-group-options row mx-0 mt-3 mb-5" data-toggle="buttons">
 <label class="btn btn-lg btn-neutral col-12 mb-2 text-left text-sm">
  <input type="radio" name="radio-processor" value="1" checked="">
  Single Channel DDR4 at 3200 MHz (1 x 8GB)
 </label>
 <label class="btn btn-lg btn-neutral col-12 mb-2 mr-0 text-left text-sm active">
  <input type="radio" name="radio-processor" value="2">
  DDR4 at 3200MHz (8GB+16GB)
  </label>
</div>
2 Likes
4

Another option is to use a variable to store the selected options. A really simple example, using a really simple layout:

        .col-option {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .col-option.active {
            color: #fff;
            background: #faa41a;
        }

    <dmx-value id="var1"></dmx-value>
    <div class="container">
        <div class="row">
            <div dmx-class:active="var1.value == 1" class="col col-option p-4" dmx-on:click="var1.setValue(1)">
                <h1>Option 1</h1>
            </div>
            <div dmx-class:active="var1.value == 2" class="col col-option p-4" dmx-on:click="var1.setValue(2)">
                <h1>Option 2</h1>
            </div>
            <div dmx-class:active="var1.value == 3" class="col col-option p-4" dmx-on:click="var1.setValue(3)">
                <h1>Option 3</h1>
            </div>
        </div>
    </div>

So a variable per set of options, hope it makes sense :slight_smile:

2 Likes
5

Sorry Teo, I can’t give you a like although you deserve it. You know why.

1 Like
6

Yeah. Keep on liking boi!
Or you could just tamper with the discourse PG db and add me a few thousand likes. It will end your suffering sooner.

1 Like
7

Unfortunately same issue as my current idea. When the next selection is made it cancels the first selection…

8

Well that sounds like I should be liking everything Teo adds to the forum…

Unless you make it worth my while!

1 Like
9

Just create a var for each set of options.

[RAM]
[256MB] [512MB] [1024MB] -> store in variable named varRam

[HDD]
[512GB] [768GB] [1024GB] -> store in variable named varHDD

etc.
Or use the local/session storage if you want to keep the values longer.

1 Like
10

I have done this which is great but I would like the selection to remain shown. I'll try adding a class to it when the variable is set on click. Set the background etc.

11

That's the idea of dmx-class:active="var1.value == 1" in my example.

12

https://community.wappler.io/u?period=all

First step Brian.
Then if I catch Teo I get to be part of the team. 100% salary, 0% work. And a badge…stingy guys!

@dave my example should work 100% of 0% of the times.
Now seriously. You asked for CSS and I gave you something better: HTML and BS classes. I hope you weren’t expecting the JS part to toggle active classes!

3 Likes
13

Kapture 2021-02-22 at 12.42.32

14

What 'No-de' JS for me!

i-pity-da-fool

:smiley:

1 Like
15

@Teodor

Can we have a clear cache button in Wappler please?

:slight_smile:

16

My monkey got its nuts. Thank you gentleman!

:smiley:

1 Like