Won't fix Footer select box is non-responsive

tomdav

Active member
Affected version
2.1
Attached screen print when viewing watched threads at XF. Drop down is non-responsive causing page to overflow. Also note prior to overflow things do not respond gracefully. Would suggest white-space: nowrap for container (so it responds more gracefully) and have drop down resize to remaining width.

Styling in bold I used for fix in screen print:

<div style="white-space: nowrap" class="block-container">
_ _ <span class="block-footer-controls" style="display: table">
_ _ _ _<select style="display: table-cell; width: 100%" . . . </select>
_ _ _ _<span style="display: table-cell"><button . . . </button>
_ _ _ _</span>
_ _ </span>
</div>

Better yet, why not get rid of "Go" button to free up space and be consistent with behavior of other drop downs?
 

Attachments

  • Untitled-1.webp
    Untitled-1.webp
    26.9 KB · Views: 39
Last edited:
Personally, I think this is within reasonable bounds. It seems to start to break pretty much at the resolution you have in your screenshot which is about 270px.

We don't generally anticipate there to be many phone screens below 320px let alone 270px.

I disagree that getting rid of the Go button would be appropriate and I'm not sure how that would make it consistent - nearly all dropdowns in the software are accompanied by a button to submit the form. Even so, there's a real risk of tapping on the wrong entry which if submitted automatically would potentially be a destructive operation.
 
What about 350 px wide viewport? See screen shot taken with my Pixel 3. I have my Pixel 3 display size bumped up 1 notch to "large" for my aging eyes. I doubt I'm the only one. This is a 5.5" flagship phone.

As far as drop downs, they are everywhere in XF. Very few of them require a go button. What you've done here is gotten a bit lazy and used a non-responsive html select tag instead of a responsive drop down. At least make the select tag responsive so that it doesn't wrap the other elements.

As far as confirmation, that could be done after the selection. For example, when I choose to stop watching a thread XF will provide a confirmation prompt. But I get it. I sometimes get lazy when coding too. It's so easy to for example not have to go thru all the BS to code a XF modification properly. But I still do it, because I know it's the right thing do do.


205426205428
 
Last edited:
Top Bottom