Currently using compiled CSS, tried this however it does not seem to be working? The switch is inside the container
I do not see that option, only the first
Did you turn compiled CSS off first?
Okay just did it, it still didn’t work and it actually broke our floating CSS button that we already have in if I turn the compile CSS off. Is there maybe a problem with my CSS code? Just need the switch to be red to stand out more is all.
It’s weird that a piece of code broke because compiled CSS is off. Can you show us your full code?
This can happen due to an inappropriate selector choice. A possible solution is to prepend #page-root to the current selector to strengthen its specificity.
button[data-testid=“menu-left-button”] {
display: none;
}
.comment {
margin: 0px;
padding: 0px;
background-color: none;
top: 80%; /* Moved much further down */
left: 75%;
width: 80px;
height: 50px;
position: -webkit-sticky;
position: sticky;
z-index: 999;
margin-top: -70px;
}
.comment button div {
width: 120px; /* Slightly wider */
height: 30px;
}
.comment svg {
padding-left: 10px;
width: 85px; /* Adjusted to match button div size /
height: 60px;
fill: white; / Set the SVG color to white */
}
.comment button {
background-color: white; /* Navy background /
width: 120px; / Made wider */
}
.test {
margin: 0px;
padding: 0px;
background-color: none;
top: 0; /* Position the button at the top /
left: 0; / Move the button to the left side */
width: 80px;
height: 50px;
position: -webkit-sticky;
position: sticky;
z-index: 999;
}
.test button div {
width: 100px; /* Slightly wider */
height: 30px;
}
.test svg {
padding-left: 10px;
width: 75px; /* Adjusted to match button div size /
height: 40px;
fill: white; / Set the SVG color to white */
}
.test button {
background-color: black; /* Black background /
width: 120px; / Made wider */
}
.jobs-history div[class*=“select-mode-container___StyledDiv2”] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.jobs-history div[class*=“pages-component-renderer___StyledDiv3”] {
-webkit-order: 1;
-ms-order: 1;
order: 1;
padding-bottom: 20px;
}
.jobs-history div[class*=“wire-list-container___StyledDiv13”] {
-webkit-order: 2;
-ms-order: 2;
order: 2;
}
[class*=“red-switch-box”] .switch-checked .track {
background-color: red !important;
}
the last class section is the only one thats not working in the app btw
Is this code your own creation or was it given to you by someone else? I find the use of class names with asterisks quite unusual.
Given by someone else, I don’t have much knowledge on CSS. Most of these I copied from community/chat gpt
Try using this code. I can’t test it myself, but it seems like it should work:
#page-root .red-switch .peer:checked ~ div {
background-color: red;
}
Didn’t have any effect either unfortunately, also to note we have a floating support button in the bottom right for our app similiar to the one Glide have in their builder. When I turn compiled CSS off, that button turns black and ceases to float. When I then turn the preview on, the button disappears completely AND the switch doesn’t turn red during any of it
Did you apply this setting and assign the class name “red-switch” below your switch component? If the switch does not support class naming, it is best to wrap it in a container and assign the class name to the container instead.
I just edited my previous comment with the update of doing that
Like so?
Those settings now work but our floating support button completely disappears
One of the differences between enabling and disabling the compiled CSS button is that when enabled, #page-root is automatically added to all your selectors. If you already have #page-root, enabling the button will result in duplication. On the other hand, if a selector is incorrectly named (not intended for a specific style), it may end up lower in the hierarchy and fail to appear due to being overridden by stronger existing styles.
My suggestion is to keep the setting with the button turned off. If your code is not working, simply add #page-root in front of the selector. This achieves the same effect as enabling the button.
2 Likes
You are in the wrong space:
https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/33?u=himaladin
It works if you want to apply it to all switch components in the app. Just remove the class name inside the selector so it becomes: #page-root .peer:checked ~ div
2 Likes
Thank you so much
1 Like