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 ()
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