nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

blue dashed box does not display around the component

iwTech

The components with transparent back ground will show the blue dashed boxes on
mouse over and if the components back ground is different , it will not show the blue
dashed boxes every time you mouse over the component

Why its' not showing ? Any idea ?

Thanks
Vin

Find more posts tagged with

Comments

Rick Poulin

Depends on your browser and how you built your component. Usually the border is applied to a div hidden behind your component. This div has a dashed border of 1px, but is sized to have 2px less in width and height than your component. This prevents the layout from getting all skewed by introducing a 2px that shouldn't normally be there on the render. Thus, when you apply a background color to the component, you completely hide the border-displaying div that's behind it.

You could try applying a 1px margin to your top-level component div (the one that's setting the bg color) maybe, and only in edit view? In any case, the fix is fiddling with CSS and personally I don't think it's worth the trouble.