Text entry under button bar with small viewport desktop

(Pat David) #1

I have users seeing this problem, particularly on a Samsung Galaxy Tab II, Chrome 42. When entering text into the text wmd-input textarea, the div#wmd-button-bar is above the text input, obscuring the first couple of lines of input.

It appears that due to the width of the viewport, the wmd-button-bar wraps, and this is what causes the obfuscation.

This can be replicated in a desktop browser by resizing the width of the window to below 700px.

I believe this same issue may be related to:

I’m wondering if it makes more sense to check for a min-width, then hide the preview entirely (it seems to work this way on iOS as far as I can tell - no preview, which is nice.

(Simon Cossar) #2

A quick fix is to add:
.wmd-button-row { overflow: hidden; } That hides the buttons instead of letting them wrap and cover the text-area.

There is also a bit of room to save on the sides of the editor. Doing something like this instead will let the screen get down to around 680px before the buttons wrap.

@media screen and (max-width: 735px){
    #reply-control .wmd-controls {
        left: 15px; // was 30px
        right: 15px; // was 30px
    .control-row.reply-area {
        padding-left: 15px;
    .wmd-button {
        margin-right: 4px; was 5px

(Jeff Atwood) #3

I did the first part, added overflow: hidden, good idea!

As for the second part, on mobile these borders are already trimmed down to 10px.

Problem is @patrick_david you are not getting the mobile layout on that device, which is more of a detection issue IMO. You should use the hamburger button at the upper right to switch to the mobile layout.

Alternately if you like the desktop layout click the “hide preview” button at the bottom right to give yourself some more room…

(Jeff Atwood) #4

I can confirm the overflow hidden trick works when I switch to desktop layout on Nexus 7 portrait

(Jeff Atwood) #5