Editing posts becomes user-unfriendly when they get long vertically Topic is solved
Re: Editing posts becomes user-unfriendly when they get long vertically
I see, well I am glad that we at least have to come a workaround for you.
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]
Re: Editing posts becomes user-unfriendly when they get long vertically
vivaldi has a lovely resize handle on multi-line edits usually its only vertical resize but sometimes you can resize its width too. As does Edge
rawr. fear me.
*poke*
Is it December 21, 2012 yet?
*poke*
Is it December 21, 2012 yet?
Re: Editing posts becomes user-unfriendly when they get long vertically
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... :/
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]
- A Keymaker
- Posts: 457
- 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
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
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
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
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
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;
}
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;
}
Code: Select all
width: 50% !important;
height: 50% !important;
Re: Editing posts becomes user-unfriendly when they get long vertically
You could try something like this... also, it should be .icon as .fa-image is actually only that one icon.
Note: the icons are actually "font-icons" so they scale by font size.
This should scale all of it down proportionally.
Code: Select all
#format-buttons input,
#format-buttons button,
#format-buttons .icon {
font-size: 85% !important;
}
This should scale all of it down proportionally.
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]
- A Keymaker
- Posts: 457
- 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
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
and made above space for it with this
And another issue
After choosing such variant
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
Code: Select all
fieldset.fields1:nth-child(2) > div:nth-child(5) > select:nth-child(1)
{
margin-left: 243px !important;
}
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;
}
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
- A Keymaker
- Posts: 457
- 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
Also it seems that
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
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]
Code: Select all
.postbody .content
{
max-height: 222px !important;
overflow-y: scroll;
}
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;
}
[And once again I upgraded the code in post marked as solution]
Re: Editing posts becomes user-unfriendly when they get long vertically
If you just want to move the icons relative to the buttons..
Hide the smilies and reposition the code selection box, you cannot move into another element with css, but you can move it around:
I am not sure about the previewed post...
Code: Select all
#format-buttons .icon
{
position:relative;
top: 3px;
}
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;
}
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]
- A Keymaker
- Posts: 457
- 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
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
Smiles I already hid with
Code: Select all
.smiley-box img
{
width: 0;
height: 0;
}
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;
}
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;
}
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
- A Keymaker
- Posts: 457
- 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
I also shrunk the navigation bar at the top with this
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]
Code: Select all
.nav-link
{
font-size: 80% !important;
position:relative;
top: -1px;
}
.navbar .nav-tabs
{
height: 24px !important;
position:relative;
top: -6px;
}
[And once again I upgraded the whole code in post marked as solution]
Re: Editing posts becomes user-unfriendly when they get long vertically
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 */
}
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]
- A Keymaker
- Posts: 457
- 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
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;
}
- A Keymaker
- Posts: 457
- 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
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]?
#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]?
#4] How to remove that big vertical space at the very bottom [marked above with green]?
#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]?
#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]?
#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.
- A Keymaker
- Posts: 457
- 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
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;
}
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
- A Keymaker
- Posts: 457
- 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
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]
- A Keymaker
- Posts: 457
- 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
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;
}
- A Keymaker
- Posts: 457
- 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
This is the last remaining issueKeymaker wrote: ↑22 Jun 2022, 13:55So, 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
[...]
- A Keymaker
- Posts: 457
- 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
After all I decided to unfold windows with
Code: Select all
code
{
height: auto !important;
}
So this is is for this topic, thank you all for your help