locked
MVC is removing character from HTML Class-list (TailwindCSS) RRS feed

  • Question

  • User-466043453 posted

    Hi .. 

    I'm developing a MVC 5 website using Razor views. 

    We've decided to use TailWindCSS and im now running into a problem with that. 

    One of the CSS class contain a slash : w-1/3 

    Width of 1/3rd 

    Sadly MVC rendering, removes the slash in the class, which therefore breaks the page. 

    How do i disable this ?

    is it part of the Anti XSS engine ?

    PS: We are running the website through Umbraco - does that have anything to do with it ? 

    Thanks

    Monday, June 22, 2020 7:14 PM

All replies

  • User-466043453 posted

    Investigating further... 

    It seems that it's not MVC or Umbraco which is removing the character. Instead i think there is a script running which is adding/removing/editing the class list, that doesn't support these special chars !!

    Monday, June 22, 2020 7:26 PM
  • User1686398519 posted

    Hi MartinKirk,

    I quoted the "tailwind.min.css" file, and used "w-1/3" on the Razor page, there is no problem at runtime. You can check if the utilities for setting the width of an element is disabled in the tailwind.config.js file.

    You can refer to this link for more usage of TailwindCSS.

    Page

    <link href="~/Content/tailwind.min.css" rel="stylesheet" />
    <div class="flex">
        <div class="w-1/3">.w-1/3</div>
        <div class="w-1/3">.w-1/3</div>
        <div class="w-1/3">.w-1/3</div>
    </div>

    Here is the result.

    Best Regards,

    YihuiSun

    Tuesday, June 23, 2020 3:19 AM
  • User-466043453 posted

    Hi thanks .. 

    As i wrote in a followup comment, it seems that it's caused by a script on the page.

    Tuesday, June 23, 2020 11:15 AM
  • User1686398519 posted

    Hi MartinKirk,

    I can't reproduce your problem here. Can you give more code and the js files you quoted?

    Best Regards,

    YihuiSun

    Friday, June 26, 2020 9:56 AM