Syntax for giving a button a particular width

Question

How do you set a button to a particular width? This is one of the things I have tried so far:

(:require [om.next :as om :refer-macros [defui]]
          [om.dom :as dom])

(defui HelloWorld
  Object
(render [this]
     (dom/button #js {:style {:width 300}} (get (om/props this) :title))))

Setting the title of the button works fine and is probably not relevant for this question. I've left it in because it is a typical thing to be doing, and placement of the attributes might be important.

The lein project.clj file has these dependencies:

[org.clojure/clojure "1.7.0"] 
[org.clojure/clojurescript "1.7.170"] 
[org.omcljs/om "1.0.0-alpha24"] 
[figwheel-sidecar "0.5.0-SNAPSHOT" :scope "test"] 

Answer 1

I think the problem is due to #js only working on the top level. #JS will work on a top level map {} or vector [], but if you have nested data as values, you need to include additional #js calls for each embedded object.

What you really need is

(:require [om.next :as om :refer-macros [defui]]
          [om.dom :as dom])

(defui HelloWorld
  Object
(render [this]
     (dom/button #js {:style #js {:width 300}} (get (om/props this) :title))))

Have a look at this post on using #js. For readability, rather than nested #js calls, you are often better off using clj->js

Answer 2

I got it to work with this:

(defui HelloWorld
  Object
  (render [this]
     (dom/button (clj->js {:style {:width 300}}) (get (om/props this) :title))))

Note the use of clj->js.