I have modified the css for the switch component, so that it has an ios-like style when opened on android.
but how to make it automatically applied to all switch components?
because now I can only implement by including the name of the switch component.
this is element switch only for “Status Flash Sale”
button#switch-Status\ Flash\ Sale{
}
1 Like
Try using this instead:
<pre><span><style>
[data-test="app-switch-view"] {
/* Your CSS goes here
}
That’s the generic class name for all switch components. You would need to apply the CSS on every details screen where it’s needed.
I’ve tried it and it still doesn’t work
1 Like
Can you share the CSS that you’re using?
(I’m no CSS guru, but if you share what you have then somebody else may be able to help).
1 Like
Darren’s method should work as long as the CSS is correct, since this is a component that has a stable name. I would like to view the snippet code being used here to see if there’s something we’re missing.
button#switch-Status\ Flash\ Sale{
position: relative;
margin-left: 8px;
flex-shrink: 0;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 52px;
height: 21px;
}
1 Like
I think this is the problem, since you’re targeting only that specific button. You should change it to [data-test="app-switch-view"]
and append the <pre><span><style>
tags
<pre><span><style>
[data-test="app-switch-view"] {
position: relative;
margin-left: 8px;
flex-shrink: 0;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 52px;
height: 21px;
}
Like that.
1 Like
the code works fine but it seems the target is not quite right and I just found for targets with certain element names like.
button#switch-Status\ Flash\ Sale
I wish I could target all switch components.
if using this code.
[data-test=“app-switch-view”]
css not working.
it already exists
<pre><span><style>
1 Like
Can you send some screenshots over on how that is not working? What is not “quite right” in this case?
I believe you have more code below your screenshots so my test is not going as it should (some broken components, but nevertheless I will show what I have here).
With your code (testing 2 buttons with different names, and added background: red to the code): the targeted switch is pushed to the left a bit, and the background is red.
With my new code, realizing that the data-test level is 1 level above the “button” so I adjusted it.
So, in short, it should be:
[data-test=“app-switch-view”] button
1 Like
Wow cool, I’ll give it a try
1 Like
unfortunately, still can’t.
thanks for helping master ThinhDinh and master Darren.
Sorry if my question bothered you.
maybe later someone can read this case and can help.
1 Like
Can you paste the full code here so I can take a look at it?
1 Like
MattLB
June 28, 2022, 12:01am
16
The Glide experts are ridiculous ! Great to see !!
1 Like
Just contributing my part to make this community great
system
Closed
June 29, 2022, 2:38am
20
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.