Editing posts becomes user-unfriendly when they get long vertically Topic is solved

[A Keymaker]

When I write short posts [like this one] everything is A-OK. But if they get long vertically, i.e. with multiple lines which forces me use the internal scroll bar - and that is both tedious and counter-productive

Because when I use the mouse wheel to scroll down within a post window then I almost always exceed the range of that sub-window - and thus my scrolling gets applied to the whole webpage / tab. And so the end effect is that I either loose from sight that menu at the top (with B I U etc. text formatting options) when scrolling do write at the bottom of a post - or - I loose from sight the bottom of a post when scrolling up to use the menu


In the Board Preferences available in my User Control Panel I found not options in regard to this issue. So can this be fixed in the code of this forum? Or maybe this could be done with some neat AHK script?

[joedf]

You could edit the page with javascript. Run this in the webbrowser console or with userscript.

Code: Select all

document.getElementById('message').style.height = '5000px';

You can also size the reply box with the little handle on the lower right of the textbox.

[A Keymaker]

You could edit the page with javascript. Run this in the webbrowser console or with userscript.

Code: Select all

document.getElementById('message').style.height = '5000px';

For that I used https://addons.mozilla.org/en-US/firefox/addon/javascript/ plugin. And for me 333px is the optimal value

But the problem with it is that it stops working when I need it the most- i.e. when the post gets long: the size of box just gets higher thus still moving that menu from sight. With this approach, that box for text when editing must be permanently held at a fixed value and not just set to it when it is loaded and presented to user

Plus there is this caveat that it does not limit itself onlyto autohotkey.com/boards/ but runs on whole content of autohotkey.com



Maybe this be somehow reworked to a CSS code? I could save in my Stylish plugin, that allows me to modify webpages

I tried using

textarea {
height: 300px !important;
}

then

#message-box textarea {
height: 200px !important;
}


and

textarea.inputbox {
height: 100px !important;
}


plus all together, but it did not work

You can also size the reply box with the little handle on the lower right of the textbox.

That other solution resets itself to default with every new post I write, thus would require from me to almost always manipulate that window. And so it is a workaround that works but is tiresome to implement

And most important - bu also stops when it is needed the most- because when the post gets long the handle disappears and scroll bar appers

[joedf]

You can use userstyles for that!
Custom css for any site or specific page pattern you choose.

Use this to size the textarea:

Code: Select all

#message {
	min-height: 333px !important;
}

Here's some handy CSS i wrote for you to try
It will "float" the buttons at the top of the window when scroll down enough.

Code: Select all

#format-buttons {
	position: sticky;
	z-index: 46;
	top: 29px;
	background: #f4f4f4;
	display: block;
	padding: 1em;
	border: 1px solid #51708a;
}
.fields1 > #format-buttons ~ #format-buttons {
	top: 89px;
}

Note: made with the default forum theme in mind.

[A Keymaker]

You can use userstyles for that! :+1:

What is this userstyles that you speak of - the Userstyles plugin [which I did not find such] or the Firefox built it option [which I also did not find]?

Or did you simply mean some styles of a user applied in whatever ways available to such any user?

[...]
Use this to size the textarea:

Code: Select all

#message {
    min-height: 333px !important;
}

Now this helps. It limits the size of area of editing

To avoid any scrolling, at lest before having to execute the Preview or Submit, a value of ~200px is optimal for my widescreen monitor and ~140% zoom in Firefox. And I could increase that value in an quick and easy way - if only I knew how to downsize greatly the #site-description element, which is than ridiculously huge banner at the top

And also moving

Code: Select all

#smiley-box

[i.e. everything that is below Smilies somewhere up could help / would be required then

Here's some handy CSS i wrote for you to try :+1:
[...]
Note: made with the default forum theme in mind.

Thank you very much

But which was the default one? Simplicity? I am using Digi Orange - but this CSS script does not work for either of them, even if I add position: sticky !important; modification and also add the same line to the .fields1 > #format-buttons ~ #format-buttons portion of your code

[joedf]

Yes, the default theme is Simplicity. Yes, the userstyles plugin is Stylish: https://addons.mozilla.org/en-CA/firefox/addon/stylish/
Or you could also give stylebot a try: https://addons.mozilla.org/en-CA/firefox/addon/stylebot-web/

[joedf]

I just tried this with firefox+stylish+digi-orange and worked for me:

Code: Select all

#format-buttons {
	position: sticky;
	z-index: 46;
	top: 29px;
	background: #2e2e2f;
	display: block;
	padding: 1em;
	border: 1px solid #51708a;
}
.fields1 > #format-buttons ~ #format-buttons {
	top: 89px;
}
#message {
	min-height: 333px !important;
}

[A Keymaker]

OK, it works - my stupid mistake: in my new Stylish entry I chose for Applies to: value URL instead of URLs on the domain


Here is your code expanded by me with my adjustments

Code: Select all

/*********** NAVIGATION BAR ***********/
.nav-link
{
font-size: 80% !important;
position: relative;
top: -1px;
}
.navbar .nav-tabs
{
height: 24px !important;
position: relative;
top: -6px;
}



/*********** POST AREA: EDIT WINDOW ***********/
#message
{
height: 222px !important;
}

/*********** POST AREA: POSTED MESSAGES WHEN NON EDITING & PREVIEW WINDOW ***********/

.postbody .content
{
max-height: 222px !important;
overflow-y: scroll;
}

/*********** POST AREA: POSTED MESSAGES WHEN EDITING ***********/
.post > .inner {
max-height: none !important;
}

/*********** TEXT AREA: ??? ***********/

#message textarea
{
}


/*********** FORMAT MENU WITH BUTTONS ***********/
#format-buttons
{
position: sticky;
z-index: 46;
top: 0;
background: #2E2E2F;
display: block;
padding: 0;
border: 0 solid #694D0C;
}
.format-buttons
{
margin: 1px 0 20px 0;
}
fieldset dd
{
margin-bottom: 0;
}
fieldset.fields1 div
{
margin-bottom: 0;
}



/*********** BUTTONS ***********/
#format-buttons input,
#format-buttons button,
#format-buttons .icon
{
font-size: 86% !important;
max-height: 1.66em !important;
padding-top: 0 !important;
margin: 0 !important;
font-weight: normal;
position: relative;
bottom: 2px;
}
button
{
position: relative !important; /*********** DOES NOT WORK ***********/
bottom: 2px !important; /*********** DOES NOT WORK ***********/
}

/*********** DROP DOWN MENU: FONT ***********/
.format-buttons select
{
font-size: 10px;
margin-right: 0 !important;
}

/*********** DROP DOWN MENU: CODE ***********/
select
{
font-size: 11px;
margin-right: 55px;
margin-bottom: 10px !important;
}
fieldset.fields1:nth-child(2) > div:nth-child(5) > select:nth-child(1)
{
font-size: 11px;
padding: 0;
width: fit-content;
float: right;
position: relative !important;
top: -18px !important;
}



/*********** SEARCH / NEW POSTS /SEARCH BAR ***********/
#wrap
{
position: relative;
top: -15px;
}

Search New posts Web Search
.navbar.secondary > ul
{
line-height: 0.33;
}

/*********** HOME BAR ***********/
.navbar ul.linklist
{
padding: 0;
}

/*********** FORUM RULES BAR ***********/
div.rules
{
font-size: 6px;
line-height: 0;
padding-left: 10px;
padding-top: 0;
padding-bottom: 0;
    
}

/*********** FORUM RULES BAR ***********/
.postbody h3
{
font-size: 6px;
padding: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin-bottom: 0 !important;
line-height: 0.99;
color: #B41313;
background: #131313;
}




/*********** POST A REPLAY BAR ***********/
.panel > .inner > h3:first-child, .panel > h3:first-child
{
font-size: 13px;
line-height: 0.66;
}

/*********** THREAD TITLE ***********/
h2
{
font-size: 6px;
line-height: 3px;
padding-left: 10px;
padding-bottom: 0;
}
/***********
h2 a {
color: #694D0C !important;
}
***********/

/*********** SEARCH BOX & SUBJECT BOX ***********/
input.inputbox
{
width: 555px !important;
}

/*********** SEARCH BOX 
input.tiny {
width: 333px;
}
***********/

/*********** SEARCH BOX: SEARCH ICON ***********/
.button-search 
{
position: relative;
top: 0 !important;
}



/*********** EMOTICONS ***********/
.smiley-box img
{
width: 0;
height: 0;
}
.smiley-box
{
margin-top: 24px !important;
margin-right: -222px !important;
}



/*********** LOGO AT THE TOP ***********/
#site-description
{
display: none !important; /*********** HIDDEN ***********/
}
.logo img
{
display: none !important; /*********** HIDDEN ***********/
width: 30px !important;
}
.headerbar
{
margin-bottom: 0;
}




/*********** BOTTOM: COPYRIGHT ***********/
#page-footer .copyright
{
display: none !important; /*********** HIDDEN ***********/
}

/*********** BOTTOM: EMPTY SPACE ***********/
#phpbb > div:nth-child(22)
{
display: none !important;
}

The idea behind is to gain as much as possible in the vertical space for writing - assuming a user is running on 21:9 monitor with 3400 x 1600 resolution, with Firefox zoomed in to 150%. I also hid Smiles as those animations drove me mad. And I hope I did not mess up something else with all those tweaks


So thank you for providing me with a template



But do you know how to remove that blank vertical space between lines with
Search New posts Web Search
and
Home Board index AutoHotkey Ask For Help
?

And how to get rid of that huge blank space at very the bottom?

[joedf]

Glad it's working so far. As for the space, could you share a screenshot and highlight it?

[A Keymaker]

This JPG has the small wasted space at the top marked with X's
https://fastupload.io/1ThQDLh7dh6XYgT

While this one marks the big one at the very bottom
https://fastupload.io/SfIWE82K2sHlFw9

[joedf]

I got the same screenshot twice...
as for the space, I guess you could force it up a little bit like so:

Code: Select all

#wrap {
	position: relative;
	top: -16px;
}

[A Keymaker]

I got the same screenshot twice...

I am sorry, I made a mistake. I just corrected that second link

as for the space, I guess you could force it up a little bit like so:
[...]

This works. Thank you

[joedf]

Interesting.... I don't have this large of a space on the bottom.

you could hide the copyright notice:

Code: Select all

#page-footer .copyright {
	display: none;
}

and then try hiding that last div on the bottom ?

Code: Select all

#phpbb > div:nth-child(5) {
	height: 0;
	display: none;
}

[A Keymaker]

Interesting.... I don't have this large of a space on the bottom.

I think is is the place where question about cookies are shown. Maybe the difference is with our cookie settings

I get the same wasted space at this forum https://freecommander.com/forum/ which looks very alike

you could hide the copyright notice:
[...]

copyright. did work - I gained vertical space

But that empty bottom is still there

[joedf]

You can try using the Web Inspector to try determine what is causing that space:
https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/index.html

Otherwise, we don't have a cookie question setup as far as I know.

[A Keymaker]

I was using this whole time - but its a little overwhelming for someone who is not a webmaster


I used Inspector on that area once again - but this time stopped looking in CSS Pane but went to HTML Pane, then clicked on <div>...</div> and chose to copy the CSS Selector - and that was it

So now addition like this

Code: Select all

#phpbb > div:nth-child(22){
display: none !important;
}

does the trick of removing that cast empty space at the bottom. [I upgraded accordingly the code from viewtopic.php?f=3&t=105226#p467567]

So thank you once again - and for now I am done with tweaking looks of this forum

[A Keymaker]

But one more question - to anyone and everyone: why all those multiple bars at the top and not so small various margins?

Am I the only one, who sees them as clutter? And as soon as after writing just ~25 posts. The end effect with them implemented is as I had described it: editing posts becomes user-unfriendly when they get long vertically. The layout does look good - but main functions suffers from it. I just do not understand this

[joedf]

For me, I am not getting margins that are as large as you've shown me, but also these themes were chosen since they support mobile devices unlike our old theme. We did not design these, we only tweak some colors and maybe some functionality here and there...

[A Keymaker]

Ah yes, mobiles. I forgot about them. And that unlike them my widescreen monitor is a still an uncommon hardware. And that I also use in an unusual fashion of keeping one wide area of operations instead of splitting it into 2 or 3

[A Keymaker]

Interesting.... I don't have this large of a space on the bottom.

I think is is the place where question about cookies are shown. Maybe the difference is with our cookie settings

I get the same wasted space at this forum https://freecommander.com/forum/ which looks very alike
[...]

Apparently this changes when you zoom in and out, as various elements change their sizes

It one of the downsides of using widescreen monitor - many webpages are simply vaguely compatible with them