Select bug for Devices and Device Dot bug

Elements Feedback
1

I’ve have a select control (id is myid) and selected desktop & enabled the little dot to set value for that device, then selected sm & enabled the little dot & selected another value. And then of course I put {{myid}} in the class which exports this code:
sm:top-0 left-0 lg:bottom-0 left-0

When I click the device icons in the upper panel, the values change in the side control but the div it’s being applied to don’t move AND the dots under the icons are not staying either.

Is the solution to put square brackets around the values and not a device name, or is there another bug here?

2

Hard to know what’s going on here, can you record a video or supply a test project?

3

Here’s the control:

{
  "title": "Position:",
  "id": "mypos",
   "select": {
     "default": "bottom-0 left-0",
     "items": [
       {
         "title": "Top Left",
         "value": "top-0 left-0"
       },
       {
         "title": "Bottom Left",
         "value": "bottom-0 left-0"
       }
     ]
   }
}

Html:

<div class="absolute flex flex-col md:flex-row w-full h-[200px] md:h-[400px]">
  <div class="pos2 relative flex flex-col w-full md:w-1/2 h-full">
    <div class="absolute {{mypos}} w-[100px] md:w-[196px] h-[36px] md:h-[72px] bg-indigo-500"></div>
  </div>
</div>

This should make a simple purple box that should be able to have a different position on devices w/ ‘mypos’

And here’s screenshot with missing dots on devices when both have a different setting and dot enable on the two device sizes:

devices_nodot
devices_nodot632×280 12 KB

4

Just wanted to jump in here and say that you can’t set two classes in a control value as you are doing and expect Elements to make them both responsive.

Elements will make the control value responsive by prefixing it with responsive modifiers.

So your exported value (sm:top-0 left-0 lg:bottom-0 left-0) is working “as expected”, but likely not working as you expected - note that left-0 is not prefixed with any responsive modifiers.

The simplest solution to this is to separate out each value in to its own control as this will allow Elements to correctly add responsive modifiers to the individual values.

Hope that helps.

5

Yeah, ok. I see what the problem is. I figured out a handler so now positioning works across all breakpoints.

6

Just wanted to give an update here and say that you can now have multiple tailwind classes in s value and Elements will magically make all tailwind classes in the string value responsive.

This means that the above statement is now incorrect. You can have the following control and Elements will make all classes responsive:

{
  "title": "Position:",
  "id": "mypos",
   "select": {
     "default": "bottom-0 left-0",
     "items": [
       {
         "title": "Top Left",
         "value": "top-0 left-0"
       },
       {
         "title": "Bottom Left",
         "value": "bottom-0 left-0"
       }
     ]
   }
}

So the output will now be something similar to:

top-0 left-0 sm:bottom-0 sm:left-0 lg:top-0 lg:left-0

Obviously depending on what the user has selected in Elements.

Hope that makes sense!

7

Ok great, the breakpoint prefixes are now added - that’s a good step forward.

Look at this for html:

<div class="relative flex flex-col w-full h-[200px] outline-red-500 outline-dashed outline-2 outline-offset-2">
  <div class="absolute {{pos}} w-[100px] h-[36px] bg-indigo-500"></div>
</div>

And this for a property:

{
"groups": [
  {
    "title": "Test",
    "icon": "square.topthird.inset.filled",
    "properties": [
      {
        "title": "Position:",
        "id": "pos",
        "select": {
          "default": "bottom-0 left-0",
          "items": [
            {
              "title": "Top Left",
              "value": "top-0 left-0"
            },
            {
              "title": "Top Center",
              "value": "top-0 left-1/2 -translate-x-1/2"
            },
            {
              "title": "Top Right",
              "value": "top-0 right-0"
            },
            {
              "title": "Middle Left",
              "value": "top-1/2 -translate-y-1/2 left-0"
            },
            {
              "title": "Middle Center",
              "value": "top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
            },
            {
              "title": "Middle Right",
              "value": "top-1/2 -translate-y-1/2 right-0"
            },
            {
              "title": "Bottom Left",
              "value": "bottom-0 left-0"
            },
            {
              "title": "Bottom Center",
              "value": "bottom-0 left-1/2 -translate-x-1/2"
            },
            {
              "title": "Bottom Right",
              "value": "bottom-0 right-0"
            }
          ]
        }
      }
    ]
  }
]
}

As a simple demo, try setting base to top left, md to top center and lg to top right. Because of various settings in a smaller breakpoint the larger breakpoints will be broken. There are other combinations that break as well, but I think this introduces the problem with classes carrying forward to larger breakpoints and causing problems.

8

What you’re describing is a fundamental aspect of CSS cascading. If you set a property in a CSS class outside a media query, it applies universally until another class or media query overrides it.

This behavior applies to Tailwind as well. In this case, you’re assigning various classes to control values, which means you’ll need to define or reset CSS properties for each control state individually.

For example, if a user selects Bottom Left positioning on mobile and Bottom Right on desktop, you need to ensure that switching to Bottom Right on desktop removes or adjusts the previous left positioning - and vice versa.

This isn’t unique to Tailwind, control values, or Elements—it’s simply how CSS cascading and specificity work.