Why are these `select` elements not being rendered?

Question

I'm working on a project for a client where there needs to be 125 dropdown menus displayed on one page. I of course am not going to manually add all those so I wrote a simple for expression to do it for me. This works for the vast majority of the dropdown menus (which are just select tags), but some do not show up at all. And it is the same three each and every time. Why are these same three never being rendered? When looking in the Elements view in Chrome Dev Tools, it shows the dropdowns as being in the DOM, but they are not shown. I've looked at this code over and over and I cannot see anything wrong with it and need a second pair of eyes? What's going on here? (NOTE: db/get-all-advertisers never returns nil) Here is the code and a picture of what I'm talking about:

EDIT: Turns out this is some absolutely bizarre bug with the browsers or graphics or something on all of my Ubuntu machines. Was not able to replicate the bug on my friend's Mac. Everything worked fine.

(def new-issue-html
  (hiccup/html
   [:html
    [:head
     [:title "Add an Issue"]
     [:meta {:name "viewport" :content "width=device-width, initial-scale=1.0"}]
     [:link {:rel "stylesheet" :href "css/bootstrap.min.css"}]
     [:link {:rel "stylesheet" :href "css/extra.css"}]
     [:script {:src "js/field-verify.js"}]]
    (let [advertisers (db/get-all-advertisers)]
        [:body
         [:div {:class "container-fluid center"}
          [:h1 "Add an Issue"]
          (conj
           [:form {:method "post" :name "newIssueForm" :action "/new-issue"}
            [:div
             [:label {:for "issue-date"} "Issue Time Period (i.e. \"July/August 2020\"): "]]
            [:div
             [:input {:id "issue-date" :name "issue-date" :style "margin-bottom: 10px;"}]]]
           (for [num (range 1 (inc NUM_OF_ADVERTISERS_PER_ISSUE))
                 :let [ad-slot [:div
                                [:label {:style "margin-right: 10px;" :for (str "ad-slot-" num)} (str num ": ")]
                                (conj
                                 [:select {:id (str "ad-slot-" num) :name (str "ad-slot-" num)}]
                                 (for [advertiser advertisers
                                       :let [option [:option {:value (:advertisers/advertiser_id advertiser)}
                                                     (:advertisers/advertiser_name advertiser)]]]
                                   option))]]]
             ad-slot)
           (anti-forgery-field)
           [:div {:style "margin-top: 10px;"}
            (hf/submit-button {:id "submit" :onclick "return checkForm()"} "Create Issue")])]])]))

@Ouroborus Nope, the DOM shows all the dropdowns as having the same options. — TomLisankie, Nov 15 '20 at 21:32
This isn't related to your problem, but all your `conj` calls are weird. `(conj [x y] z)` is just `[x y z]`. — amalloy, Nov 15 '20 at 21:36
Is there CSS hiding those particular fields? Seems unlikely, but worth checking. — Ouroborus, Nov 15 '20 at 21:41
@Ouroborus Just tried removing all CSS to see if it would do anything, nothing changed except styling. — TomLisankie, Nov 15 '20 at 21:49
Could the database be returning NULL/nil for some of the elements in `db/get-all-advertisers`? — Bob Jarvis - Слава Україні, Nov 15 '20 at 22:37
@BobJarvis-ReinstateMonica Nope, all of these dropdowns are going off of the exact same elements returned from the db (see the code) — TomLisankie, Nov 16 '20 at 00:40
It would be nice if you could include the output html data, and/or minimal reproducible example (without db querying and specific function calls). — leetwinski, Nov 16 '20 at 05:09
Can you please add the screenshot of the "Elements view in Chrome Dev Tools" — Sreeram Nair, Nov 18 '20 at 09:54
Is the problem reproducible in a different browser, e.g. Firefox? — ez121sl, Nov 19 '20 at 12:45

user2609980 · Answer 1 · 2020-11-24T11:24:06.040

0

You can wrap the fors in a doall to force realization of the lazy sequence

/edit:

It is possibly because of a Chromium bug related to GPU hardware acceleration and double monitors.. Many people experience a "Linux-only: Empty SELECT dropdown".

The bug thread states it is related to double monitors. A solution is to make the right monitor smaller than the left:

Different size monitors

Another (not successful for everyone) solution is according to this answer to disable hardware acceleration:

The summary is that you need to go to 'settings' then 'advanced settings' in Chrome, then uncheck the hardware acceleration box.

edited Nov 24 '20 at 11:24

answered Nov 16 '20 at 13:32

user2609980

10,264
15
74
143

That did not fix it either unfortunately. – TomLisankie Nov 16 '20 at 19:46
@TomLisankie Okay. It seems then that `(db/get-all-advertisers)` returns an empty list or `nil`. What you can also try, although it should not work at all then, is using `into` instead of `conj`. It will remove some nesting: `(conj [:select] [[:option]]) ;; => [:select [[:option]]]` versus `(into [:select] [[:option]]) ;; => [:select [:option]]`. Can you pass the result of `(db/get-all-advertisers)` in the question when things go wrong? – user2609980 Nov 17 '20 at 15:56

Why are these `select` elements not being rendered?

1 Answers1