Kami
Forum Cat
Posts: 40,004
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,004
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 25, 2021 8:24:29 GMT -8
Try setting .navbar-list to display:inline-block; instead then (: This works. The only side effect now is that the "Sub-boards ▼" text jumps up a few pixels on hover. See here again on "Top Level Sub-board" compared to the "Second Sub-board" where the list title stays put on hover. add vertical-align: top; to the mix (:
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 25, 2021 9:08:50 GMT -8
add vertical-align: top; to the mix (: This works, but the nitpick in me didn't like that it deviated from the default middle alignment that my sub-boards without this application have. I came up with a solution: making the hover dropdown position absolute to avoid any reposition of other elements, making it more of a "popout" style dropdown rather than the original "expanding" style dropdown ( seen here). This ends up looking even cleaner than my original plan, and I don't think I would've ended up here without your input and help, so thank you (you've helped me and taught me things several times with other issues, also, so I can't say thanks enough). Out of curiosity, I'm interested in the technical reason that the dropdown expanding "pushes" the title from the middle position to the top position. Is the only workaround for that to make the title top-aligned, or is there a way to have the dropdown not push the title out of its default middle alignment? Again, I'm happy with where I ended up with this, so this is just a learning question.
|
|
Kami
Forum Cat
Posts: 40,004
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,004
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 25, 2021 9:16:10 GMT -8
add vertical-align: top; to the mix (: This works, but the nitpick in me didn't like that it deviated from the default middle alignment that my sub-boards without this application have. I came up with a solution: making the hover dropdown position absolute to avoid any reposition of other elements, making it more of a "popout" style dropdown rather than the original "expanding" style dropdown ( seen here). This ends up looking even cleaner than my original plan, and I don't think I would've ended up here without your input and help, so thank you (you've helped me and taught me things several times with other issues, also, so I can't say thanks enough). Out of curiosity, I'm interested in the technical reason that the dropdown expanding "pushes" the title from the middle position to the top position. Is the only workaround for that to make the title top-aligned, or is there a way to have the dropdown not push the title out of its default middle alignment? Again, I'm happy with where I ended up with this, so this is just a learning question. you're welcome! by default, inline-blocks have vertical-align:baseline; as their vertical alignment. since you had an expanding list that caused the container to expand, the baseline changed to match the expansion so the list "jumped" to match the new baseline. by setting it to 'top' it aligns it to the top of the container regardless of what the baseline is.
|
|