2

I'm trying to include a button group in the navbar of a ClojureScript application in which I'm using om-bootstrap, but the layout isn't coming out right --- it's like the button group is interrupting the navbar's layout flow. What I'm getting looks like this:

enter image description here

I'd like it to look more like this, with everything on one line:

enter image description here

Here's my code:

(fn [data owner]                                                                       
  (reify                                                                               
    om/IRender                                                                         
    (render [_]                                                                        
      (n/navbar                                                                        
       {:brand (d/a {:href "#"} "Brand")}                                              
       (n/nav                                                                          
        {:collapsible? true}                                                           
        (b/dropdown {:key 1, :title "Menu 1"}                                          
                    (b/menu-item {:key 11} "Hamburger")                                
                    (b/menu-item {:key 12} "Fries")                                    
                    )                                                                  
        (b/button-group {}                                                             
                        (b/button {} "Foo")                                            
                        (b/button {} "Bar"))                                           
        (b/dropdown {:key 2, :title "Menu 2"}                                          
                    (b/menu-item {:key 21} "Tofu")                                     
                    (b/menu-item {:key 22} "Salad")                                    
                    )                                                                  
        )))))

Can someone explain how to get everything on one line?

Stack Player
  • 1,470
  • 2
  • 18
  • 32
embeepea
  • 637
  • 1
  • 6
  • 12

1 Answers1

1

I would use a row. This is a sample layout from a page of mine. I have one row, two columns. The first column has three vertical items. The second column contains a table. If you set the "width" (:xs 12) and have a single column, it should take up the width of the page. There are different settings for what I am calling width. It decides, based on device, when things wrap.

        [om-bootstrap.grid :as g]

                (d/div #js {:style (utils/display (:display e-map))}
                       (p/panel {:header (str "Daily Schedule for " current-date)
                                 :bs-style "primary"
                                 :footer (utils/footer-text)}
                                (g/row {}
                                       (g/col {:class "daily-widgets"
                                               :xs 2}
                                              (om/build db/daily-buttons-widget {:display true})
                                              (om/build ds/date_scanner {:component-id :selected-daily-date :display true})
                                              (om/build summary_work/summary-work-widget {:monitor :selected-daily-date})
                                              )
                                       (g/col {:xs 10}
                                              (table {:striped? true :bordered? true :condensed? true :hover? true}
                                                     (d/thead
                                                      (d/tr
                                                       (d/th {:width "5%"} "Technician")
                                                       (d/th {:width "10%"} "Customer")
                                                       (d/th {:width "10%"} "Vehicle")
                                                       (d/th {:width "10%"} "Status")
                                                       (d/th {:width "10%"} "Checked In")
                                                       (d/th {:width "5%"} "Hours")
                                                       (d/th {:width "50%"} "Notes")
                                                       ))
                                                     (format-tbody daily-view current-date owner))
                                              )
                                       )
Chaos Rules
  • 410
  • 1
  • 3
  • 14
  • This is fine if you just want to lay stuff out in a row. But I'm specifically interested in using the navbar component so that I can take advantage of its collapsibility (it switches to a hamburger menu when the screen is narrow enough), and this solution doesn't use a navbar. Any idea how to make the navbar do what I want? (I tried nesting a row/col inside a navbar, or wrapping a row/col around the navbar, but no luck.) – embeepea Sep 07 '15 at 02:37
  • I think my version is too old to do all of that. I haven't seen any options for that. I am investigating Bootstrap outside of Om, so I may learn something new. – Chaos Rules Sep 08 '15 at 04:23