-
|
a just came accross an issue mby sombody has an idea how to solve that: given two div's that are conditionally shown with x-show in both divs is the same svg code with linear gradients - thoose gradients have the same id now if i hide the div thats first on the side the gradients in the scond div also disappear code to reproduce: how can i tell alpine to differ between the two svgs? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
you can use $id to get a unique id, or just define the stuff somewhere else that isn't duplicated. the id will find the first match, which will be hidden, so it will also be hidden. So don't have the same id, either by only having that code once, or by having unique ids. |
Beta Was this translation helpful? Give feedback.
-
|
ids arent possible inside the svg code bcs its provided via a backend setting from the app. ive tried to set ids and :key attributes on the sourrounding div's but it doesnt fix it |
Beta Was this translation helpful? Give feedback.
-
Okay, well, you can use it just once instead of injecting it each time. Seems like a bad tooling. Alternatively you can use x-if instead of x-show, but really, the tool not being bad would be smarter. |
Beta Was this translation helpful? Give feedback.
-
|
why is it bat tooling when i have two placements for a logo, on the real site the two swg codes arent even on the same alpine component, but if i close the menu all paths with a gradient in both components disapear. should not alpine differentiate between the html inside of each component? somehow there is a bug with this gradients i guess you can see it here: https://kaa8.stagingsdev.com/ if you toggle the menu, the logo in the hero section toggles as well though it not even in the same component. |
Beta Was this translation helpful? Give feedback.
-
|
This has nothing to do with Alpine. Alpine is not touching your code at all and is not related to the issue. You can remove alpine and the same issue will happen. this is purely in how html and svg work. The bad tooling is that it is injecting the same gradiant with the same ids in different places. It shouldn't do that. It should inject it once at a higher level, or give them unique ids. Alternatively, you can load it as an svg file instead. But this has absolutely nothing to do with Alpine. |
Beta Was this translation helpful? Give feedback.
-
|
it has something to do with alpine and how x-show works for sure if i use pure css to hide one of the svgs the other one stay as is so it seems alpine cannot handle these gradients inside of svgs! |
Beta Was this translation helpful? Give feedback.
-
|
Wow im Sorry! Just tried a site without the alpine components, same result - my thoughts where obiously wrong!! |
Beta Was this translation helpful? Give feedback.
-
|
Yup, it is just about how the selector targets the pattern. It finds the very first one. And if that thing is display: none (or parent is) then it doesn't show at all. I had a similar issue before and, yes, it was frustrating trying to figure out what the hell was going on. I moved the clip mask definition to be outside of the things that used them. |
Beta Was this translation helpful? Give feedback.
-
|
yeah as you wrote i did it with x-if now and then x-show on nextTick to preserve transitions ;) |
Beta Was this translation helpful? Give feedback.
This has nothing to do with Alpine.
Alpine is not touching your code at all and is not related to the issue.
You can remove alpine and the same issue will happen.
this is purely in how html and svg work.
The bad tooling is that it is injecting the same gradiant with the same ids in different places.
It shouldn't do that.
It should inject it once at a higher level, or give them unique ids.
Alternatively, you can load it as an svg file instead.
But this has absolutely nothing to do with Alpine.