On ASP.NET a random but concise sequence of letters and numbers #85
-
|
Describe the bug To Reproduce
<!-- HTML code-->
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="warning" data-on="<img src='assets/icons/sun-fill.svg'> Light">Expected behavior Screenshots Package:
Desktop:
|
Beta Was this translation helpful? Give feedback.
Replies: 16 comments
-
|
Hi! 👋 |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Jackietkfrost, I'm not able to reproduce the issue 😢. In debug.zip you have the full html and sources used to reproduce your issue. Do you have other idea about border effects that can be causing your issue? |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, I had removed all styling to it, and it still didn't work. Do you think maybe it's an issue with ASP.Net Core? I'll give it another once-over to see if I can figure out what's causing it. |
Beta Was this translation helpful? Give feedback.
-
|
Can you try to replace the <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-sun-fill' viewBox='0 0 16 16'>
<path d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/>
</svg> |
Beta Was this translation helpful? Give feedback.
-
I used the svg path you mentioned, and it still gives that weird sequence. This is very intriguing. I went into the inspect menu and found out that the button has that sequence when it's created, so it might be something with ASP.NET Core 6. |
Beta Was this translation helpful? Give feedback.
-
|
Okay so I've narrowed it down to it being something in the _Layout from ASP.Net Core, because I created the same button in my index, and I don't have the same problem. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, I keep the issue open in case a ASP.net developer could help with this issue. |
Beta Was this translation helpful? Give feedback.
-
|
I'll keep looking into it to see if I can find some way of fixing it. |
Beta Was this translation helpful? Give feedback.
-
|
@palcarazm when you tried to replicate it, did you try it on a basic html page, or did you try with ASP.Net Core 6's |
Beta Was this translation helpful? Give feedback.
-
|
Just in an html page. I'm not into ASP. NET. |
Beta Was this translation helpful? Give feedback.
-
|
Could be that there is a not standard utf-8 char that your code editor don't render but ASP.net is replacing with this sequence? Try to delete and type the toggle code. |
Beta Was this translation helpful? Give feedback.
-
|
Well, I'm using purely english for the wording, I've also tried grave accents `, and apostrophes, and quotation marks, the latter of course causing issues with the way it displayed the image. I've checked through my page, and nothing is accentuated in any other language, and I've typed out the code block a few times at this point. I even started a new project, purely only the basics offered when starting a new web app in ASP.NET core 6, and I'm still getting the same error, but this time a different sequence of letters: I'll dive further into this during next week, and see if I can figure out what's causing this weird issue. From my understanding, ASP.Net is converting any of the HTML in the toggle into an actual html item, and using whatever system it uses to generate the HTML for the client side, making it 'obfuscate' the code, since ASP.NET is a server to client type of webpage, where the server doesn't display the full code, and that could be causing the issue. But what's weird it's only in the layout. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Jackietkfrost, Have you tried as workaround to initialize the toggle via the JS API. I let you a demo:
<input type="checkbox" checked id="theme-toggle">
2.A) With jQuery interface $('#theme-toggle').bootstrapToggle({
on: '<img src="assets/icons/sun-fill.svg"> Light',
off: 'Dark',
onstyle: 'warning',
offstyle: 'dark',
style : 'android'
});2.B) With ECMAS (vanilla JS) interface document.querySelector('#theme-toggle').bootstrapToggle({
on: '<img src="assets/icons/sun-fill.svg"> Light',
off: 'Dark',
onstyle: 'warning',
offstyle: 'dark',
style : 'android'
}); |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @Jackietkfrost, Do you have some news related to this issue? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately not yet, no. I've been stuck with a backlog and haven't been able to research more on this. |
Beta Was this translation helpful? Give feedback.
Hi @Jackietkfrost,
Have you tried as workaround to initialize the toggle via the JS API. I let you a demo:
_Layout.cshtml2.A) With jQuery interface
2.B) With ECMAS (vanilla JS) interface