WYSIWIG toolbar textarea overlap.
-
The toolbar has a fixed height, and the textarea has a margin to match, then gets its height set to 100%. That's just what you had to do in the last ten years of web design if you wanted an element to consume the available space. It fails when the floated toolbar buttons wrap, as you can easily see by decreasing the width of your window while composing a reply. I guess you could fix it with some kind of a Java script, but I just used some newfangled flexbox trickery.
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("what.thedailywtf.com") { .wmd-button-row { overflow: hidden; height: auto; width: 100%; } #wmd-button-bar { position: static !important; flex: 0 1 auto; } #wmd-input { position: static !important; border-width: 0px !important; min-height: 0 !important; height: auto !important; flex: 1 1 auto; } .textarea-wrapper { padding-right: 0 !important; display: flex; flex-flow: column; } }Could someone with a forum (paging @pjh @riking @codinghorror) give me a custom css like that so I can test it on my phone please.
-
AFK for a while; remind me tomorrow if you've not had an answer from elsewhere.
-
-
-
Great!
-
Are you trying desktop view on your phone?
Yeah, my phone defaults to desktop and I always forget to change it.
http://what.thedailywtf.com/t/wysiwig-toolbar-textarea-overlap/8441/3?preview-style=4619e30b-8f37-4ca1-ae90-9c88bb4472f4
Well, that works on my phone, but I've noticed a bug in firefox: the autocorrect popup swallows almost all keypresses when that style is enabled. (My) other browsers are fine with it, but in firefox if I start typing a username or emoji, the popup pops up and becomes a pain in the ass to get rid of.
In my Stylish implementation of it, I've added
.autocomplete { display: none; }which is no great loss imo.
Also its a bit of a pity to be missing that whole-box glow effect, but I haven't yet been sufficiently motivated to find out how to fix it.
-
-
I have to say, this is pretty funny:
