Back to Questions
561
views6
comments
Websharper does not work with CSS
websharperjavascriptsiteletwebsitesuave

runTry.html https://gist.github.com/tungandcun/91c991a52ac54fbdcb117b59c5612a5b Client.fs https://gist.github.com/tungandcun/c892ae5c23c1e29cb8da63bc02b7e079 Main.fs https://gist.github.com/tungandcun/885f2fe26efbd8907e8a0e5752e40480

You can see the difference when you run runTry.html separately when running with Websharper ! That clearly shows that Websharper does not run CSS in HTML files ! Give me a solution to solve that problem !

.

What browser are you trying this in? It seems to work correctly for me in Firefox and Chrome: I see a green button whose text transitions from black to white on hover.

That being said, what you're doing here is not ideal. Basically, you're inserting a full page (<html> tag and everything) on the client into the existing document. What you could do is have your CSS in the file that is served (so Main.html), and have your client template only contain the client content (the <button>) rather than a full page.

By on 3/5/2018 12:56 PM ()

I'm using Chorme and you can show code for changing because I still don't see a color button except a simple button

By on 3/7/2018 1:47 AM ()

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .X{ background-color:red; } </style> </head> <body> </body> </html>
By on 3/7/2018 4:29 AM ()

let me try to clarify Loïc's answer.

this call from Main.fs

1
2
3
4
5

let HomePage ctx =
        Templating.Main ctx EndPoint.Home "Home" [
            h1 [] [text "Say Hi to the server!"]
            div [] [client <@ Client.Main() @>]
]

is injecting the runTry.html content inside the Main.html template, which propably (I couldn't find your Main.html file) has an <html> tag already, resulting in a final html code similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
  ...
<body>
  <h1>Say Hi to the server!</h1>
  <div>
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        .button {
        ...
      </style>
    </head>
    </html>
  </div>
</body>
</html>

This might explain why the stylesheet works when runTry.html is tested in isolation.

To fix it, you should move the <style> content from runTry.html to Main.html and remove the <html> tag as well.

Best regards, Alex

By on 3/7/2018 5:15 PM ()

How about posting this as a Try WebSharper snippet (use the Embed link under the Embed tab of your snippet)? This would make it a whole lot easier to help you. Thanks.

By on 3/3/2018 8:53 AM ()

I think you should run my HTML before ...

By on 3/4/2018 9:57 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper