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

Discuss issues and requests related with the forum software
User avatar
joedf
Posts: 8940
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by joedf » 13 Jun 2022, 21:04

I see, well I am glad that we at least have to come a workaround for you. :+1:
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]

User avatar
tidbit
Posts: 1272
Joined: 29 Sep 2013, 17:15
Location: USA

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by tidbit » 13 Jun 2022, 22:06

vivaldi has a lovely resize handle on multi-line edits :D usually its only vertical resize but sometimes you can resize its width too. As does Edge
Image
rawr. fear me.
*poke*
Is it December 21, 2012 yet?

User avatar
joedf
Posts: 8940
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by joedf » 13 Jun 2022, 22:15

Yeah I had first suggested that, it's there for me too/us (firefox). It should be standard for all <textarea/> but the issue is really all the extra spacing and misc. with the weird large zoom- and wide monitor setup... :/
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 14 Jun 2022, 11:18

And I am back at this adjustments . Now I am working on buttons on that [now capable] floating bar, trying to make them smaller



This controls the size of those on the left side of drop down menu that has Normal as default shown; e.g. U

Code: Select all

.fa-image {
width: 2.0em !important;
height: 2.0em !important;
}
But it only affects those gray buttons themselves and not the images [i.e. icons]



And this controls the size of those buttons on the right side of that drop down; e.g. youtube

Code: Select all

button {
width: 2.0em !important;
height: 2.0em !important;
}

button.button {
font-size: 9px !important;
}
But it affected all of those gray backgrounds thus works in the same way like in case if those other buttons on the left side - but here it messes things up. And it seems that using something like

Code: Select all

width: 50% !important;
height: 50% !important;
in hope in affecting them in the same relative way [similar to how the font-size took care of them all] only messes them even more

User avatar
joedf
Posts: 8940
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by joedf » 14 Jun 2022, 12:23

You could try something like this... also, it should be .icon as .fa-image is actually only that one icon.

Code: Select all

#format-buttons input,
#format-buttons button,
#format-buttons .icon {
	font-size: 85% !important;
}
Note: the icons are actually "font-icons" so they scale by font size.

This should scale all of it down proportionally. :+1:
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 14 Jun 2022, 16:55

Is it possible to take the Select code drop down menu and place it in one line with the buttons; preferably squeezing it in-between font drop down menu and the right buttons? Or is impossible with CSS to push an object to other area? So far I managed to move it to the right with this

Code: Select all

fieldset.fields1:nth-child(2) > div:nth-child(5) > select:nth-child(1)
{
margin-left: 243px !important;
}
and made above space for it with this

Code: Select all

.format-buttons select
{
margin-right: 160px !important;
}


And another issue

After choosing such variant

Code: Select all

#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;
}
I can't seem to move all that text-icons few pixels up, so that will be in center of their gray buttons



And one more thing

Is it possible with CSS to stop the scrolling of the when an inner scroll bar reaches bottom of its window? Very often when I scroll down the edited post in its preview area or in main edit window, the stuff to be scrolled ends and the scrolling command gets annoyingly applied to the content below

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 14 Jun 2022, 17:17

Also it seems that

Code: Select all

.postbody .content
{
max-height: 222px !important;
overflow-y: scroll;
}
gets applied not only the Previewed post when editing but also to every post on a topic when they are simply viewed

How can I stop that - or can I apply those above rules only to Previewed post?

I already managed to halt that happening for already posted posts visible not as a list but as a one boxed area that shows when user edits a post - with code

Code: Select all

.post > .inner {
max-height: none !important;
}
But I was unable to differentiate between those two showcases of posted posts [the normal one and the boxed one]

[And once again I upgraded the code in post marked as solution]

User avatar
joedf
Posts: 8940
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by joedf » 14 Jun 2022, 18:05

If you just want to move the icons relative to the buttons..

Code: Select all

#format-buttons .icon
{
	position:relative;
	top: 3px;
}
Hide the smilies and reposition the code selection box, you cannot move into another element with css, but you can move it around:

Code: Select all

.smiley-box {
    display: none;
}
.fields1 > #format-buttons ~ #format-buttons {
	top: 74px;
	padding: 0;
	width: fit-content;
	float: right;
	position: sticky;
	right: 30px;
}
I am not sure about the previewed post...
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 14 Jun 2022, 21:34

joedf wrote:
14 Jun 2022, 18:05
If you just want to move the icons relative to the buttons..
[...]
It worked for text-icons-buttons on the left side but not the texted-buttons on the right. For example youtube text is still a little too low


joedf wrote:
14 Jun 2022, 18:05
Hide the smilies
Smiles I already hid with

Code: Select all

.smiley-box img
{
width: 0;
height: 0;
}
and its better that ways because it only hides those GIFs - while still retaining access to them an other options located near them

joedf wrote:
14 Jun 2022, 18:05
and reposition the code selection box,
And now I see what why would I benefit from your approach to Smilies and that other stuff near them. But in the end I ended up adding to my above .smiley-box img

Code: Select all

.smiley-box
{
margin-top: 24px !important;
margin-right: -222px !important;
}
and the reworked your .fields1 > #format-buttons ~ #format-buttons to

Code: Select all

.format-buttons select
{
font-size: 10px;
margin-right: 0 !important;
}

select
{
font-size: 11px;
margin-right: 55px;
}
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;
}

but also had to made a micro repair with

Code: Select all

.button-search
{
position: relative;
top: 0 !important;
}

joedf wrote:
14 Jun 2022, 18:05
you cannot move into another element with css, but you can move it around:
[...]
Thus it is possible to move visually - but aesthetics easily brake when zooming in and out. But currently when I zooming in as much as 200% it still holds out. And I have both drop down menus in one line - although the Code does not longer float stuck at the top when I scroll down

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 14 Jun 2022, 21:34

I also shrunk the navigation bar at the top with this

Code: Select all

.nav-link
{
font-size: 80% !important;
position:relative;
top: -1px;
}
.navbar .nav-tabs
{
height: 24px !important;
position:relative;
top: -6px;
}
but was unable to adjust the orange highlight of its buttons / links - thus [hopefully] reduce the new empty vertical space between that bar and the next line with various search features

[And once again I upgraded the whole code in post marked as solution]

User avatar
joedf
Posts: 8940
Joined: 29 Sep 2013, 17:08
Location: Canada
Contact:

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by joedf » 15 Jun 2022, 09:29

Well for the navbar highlight, you likely will need to do something like this:

Code: Select all

.navbar li:hover {
color: blue; /* or wtv color you want */
}
/* or maybe this, or both */
.navbar a:hover {
color: blue; /* or wtv color you want */
}
Image Image Image Image Image
Windows 10 x64 Professional, Intel i5-8500, NVIDIA GTX 1060 6GB, 2x16GB Kingston FURY Beast - DDR4 3200 MHz | [About Me] | [About the AHK Foundation] | [Courses on AutoHotkey]
[ASPDM - StdLib Distribution] | [Qonsole - Quake-like console emulator] | [LibCon - Autohotkey Console Library]

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 15 Jun 2022, 12:14

joedf wrote:
15 Jun 2022, 09:29
Well for the navbar highlight
[...]

Code: Select all

/*********** NAVIGATION BAR ***********/
.nav-link
{
font-size: 80% !important;
position: relative;
top: -2px;
}

.navbar .nav-tabs 
{
height: 24px !important;
position: relative;
top: -6px;
padding-top: -10px !important;
}

/*********** NAVIGATION BAR: BUTTONS ***********/
ul.leftside > li:nth-child(1),
ul.leftside > li:nth-child(2),
ul.leftside > li:nth-child(3),
ul.leftside > li:nth-child(4),
ul.rightside > li:nth-child(1),
ul.rightside > li:nth-child(2),
ul.rightside > li:nth-child(3),
ul.rightside > li:nth-child(4),
ul.rightside > li:nth-child(5),
ul.rightside > li:nth-child(6),
ul.rightside > li:nth-child(7),
ul.rightside > li:nth-child(8),
ul.rightside > li:nth-child(9),
ul.rightside > li:nth-child(10)
{
height: 22px;
}

/*********** NAVIGATION BAR: BUTTONS - DISCORD  ***********/

ul.rightside > li:nth-child(1)
{
height: 18px;
top: 4px;
}

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 22 Jun 2022, 13:55

So, assuming one is using the latest code from this post viewtopic.php?f=3&t=105226#p467567, remaining issues are:

#1] Is it possible with CSS to stop the scrolling of the when an inner scroll bar reaches bottom of its window? Very often when I scroll down the edited post in its preview area or in main edit window, the stuff to be scrolled ends and the scrolling command gets annoyingly applied to the content below


#2] How to remove that small vertical space at the top [marked below with blue]?

Image


#3] How to affect only the height of a Previewed post [marked above with yellow] but at the same time not change the height of all of the already posted posts to such same height [marked below with red]?

Image


#4] How to remove that big vertical space at the very bottom [marked above with green]?
Last edited by A Keymaker on 30 Jun 2022, 07:13, edited 3 times in total.

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 28 Jun 2022, 15:39

Keymaker wrote:
22 Jun 2022, 13:55
[...]
#2] How to remove that small vertical space at the top [marked below with blue]?
[...]
I have managed to do it with such changes to the overall CSS code:

1] .secondary had to be adjusted to

Code: Select all

{
top: -17px !important;
margin-bottom: -16px !important;
position: relative !important;
}
2] The whole #search-box had to be cut out

3] The button-search had to be changed into simple

Code: Select all

{
top: 0 !important;
}


So one issue is done for - three more to go

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 30 Jun 2022, 07:14

Keymaker wrote:
14 Jun 2022, 16:55
[...]
#4] How to remove that big vertical space at the very bottom [marked above with green]?
Altogether, this removes it almost entirely:

Code: Select all

#postform > p:nth-child(9)
{
margin-bottom: -22px !important;
}

#topicreview
{
margin-bottom: -10px !important;
}

#phpbb
{
padding-bottom: 0;
}

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


So second issue is [largely] done for - two more to go [#1 and #3 from post viewtopic.php?f=3&t=105226&p=470252#p469316]

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 01 Jul 2022, 16:54

Keymaker wrote:
22 Jun 2022, 13:55
[...]
#3] How to affect only the height of a Previewed post [marked above with yellow] but at the same time not change the height of all of the already posted posts to such same height [marked below with red]?
[...]
After testing and rethinking functionality of elements, I have managed to deal with this issue with such adjustments:

Code: Select all

#preview > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > h3:nth-child(1)
{
display: none !important; /*********** HIDDEN ***********/
}

/*********** POST AREA: PREVIEW OF POST BEING EDITED ***********/
div.content:nth-child(2)
{
width: 105.4% !important;
max-height: none;
margin-left: 2px;
overflow-y: auto;
}


#message
{
height: 750px !important;
}


.post > .inner {
max-height: none !important;
}
#topicreview
{
height: 500px !important;
}

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 12 Jul 2022, 14:04

Keymaker wrote:
22 Jun 2022, 13:55
So, assuming one is using the latest code from this post viewtopic.php?f=3&t=105226#p467567, remaining issues are:

#1] Is it possible with CSS to stop the scrolling of the when an inner scroll bar reaches bottom of its window? Very often when I scroll down the edited post in its preview area or in main edit window, the stuff to be scrolled ends and the scrolling command gets annoyingly applied to the content below
[...]
This is the last remaining issue

User avatar
A Keymaker
Posts: 454
Joined: 31 May 2022, 13:46
Location: Donjon du Château de Mérovingien

Re: Editing posts becomes user-unfriendly when they get long vertically

Post by A Keymaker » 15 Jan 2023, 07:19

A Keymaker wrote:
12 Jul 2022, 14:04
This is the last remaining issue
After all I decided to unfold windows with

Code: Select all

code
{
height: auto !important;
}
This way not only the scrolling issue is gone but I also get to see all of the content at once [assuming it does not exceed vertically my screen]

So this is is for this topic, thank you all for your help

Post Reply

Return to “Forum Issues”