style.css: Add positive "z-index" to drop-down menu

Message ID 20220201114931.1377-1-hofmann@leo-andres.de
State Accepted
Commit d235c1fd79e9196db79343e26dc9e642d7424cb6
Headers
Series style.css: Add positive "z-index" to drop-down menu |

Commit Message

Leo-Andres Hofmann Feb. 1, 2022, 11:49 a.m. UTC
  Some input fields interfere with the menu items and block their use.
A z-index ensures that the menu is always rendered in the foreground.

Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
---
 html/html/themes/ipfire/include/css/style.css | 1 +
 1 file changed, 1 insertion(+)
  

Comments

Peter Müller Feb. 1, 2022, 5:15 p.m. UTC | #1
Reviewed-by: Peter Müller <peter.mueller@ipfire.org>

> Some input fields interfere with the menu items and block their use.
> A z-index ensures that the menu is always rendered in the foreground.
> 
> Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
> ---
>  html/html/themes/ipfire/include/css/style.css | 1 +
>  1 file changed, 1 insertion(+)
> 
> diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
> index 661773675..96d0519f5 100644
> --- a/html/html/themes/ipfire/include/css/style.css
> +++ b/html/html/themes/ipfire/include/css/style.css
> @@ -258,6 +258,7 @@ input.text {
>  #cssmenu .has-sub ul {
>  	display: none;
>  	position: absolute;
> +	z-index: 1;
>  }
>  
>  #cssmenu .has-sub ul li a {
  
paul kairis Feb. 1, 2022, 5:22 p.m. UTC | #2
Not sure if this fixes something I saw the other day and took a screenshot.
The drop menu stays in the front BUT the last two items show the various
addons.

Paul

On Tue, Feb 1, 2022 at 10:16 AM Peter Müller <peter.mueller@ipfire.org>
wrote:

> Reviewed-by: Peter Müller <peter.mueller@ipfire.org>
>
> > Some input fields interfere with the menu items and block their use.
> > A z-index ensures that the menu is always rendered in the foreground.
> >
> > Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
> > ---
> >  html/html/themes/ipfire/include/css/style.css | 1 +
> >  1 file changed, 1 insertion(+)
> >
> > diff --git a/html/html/themes/ipfire/include/css/style.css
> b/html/html/themes/ipfire/include/css/style.css
> > index 661773675..96d0519f5 100644
> > --- a/html/html/themes/ipfire/include/css/style.css
> > +++ b/html/html/themes/ipfire/include/css/style.css
> > @@ -258,6 +258,7 @@ input.text {
> >  #cssmenu .has-sub ul {
> >       display: none;
> >       position: absolute;
> > +     z-index: 1;
> >  }
> >
> >  #cssmenu .has-sub ul li a {
>
  
Leo-Andres Hofmann Feb. 1, 2022, 7:33 p.m. UTC | #3
Hi Paul,
Yes, this patch is intended to fix exactly these problems.
If you want to test it right away, you can apply this patch to your style.css in /srv/web/ipfire/html/themes/ipfire/include/css/.
You may need to clear your browser cache after patching the CSS (CTRL + F5).
@Peter thanks for your review!
Regards
Leo

Am 01.02.2022 um 18:22 schrieb paul kairis:
> Not sure if this fixes something I saw the other day and took a screenshot.
> The drop menu stays in the front BUT the last two items show the various addons.
>
> Paul
>
> On Tue, Feb 1, 2022 at 10:16 AM Peter Müller <peter.mueller@ipfire.org> wrote:
>
>     Reviewed-by: Peter Müller <peter.mueller@ipfire.org>
>
>     > Some input fields interfere with the menu items and block their use.
>     > A z-index ensures that the menu is always rendered in the foreground.
>     >
>     > Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
>     > ---
>     >  html/html/themes/ipfire/include/css/style.css | 1 +
>     >  1 file changed, 1 insertion(+)
>     >
>     > diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
>     > index 661773675..96d0519f5 100644
>     > --- a/html/html/themes/ipfire/include/css/style.css
>     > +++ b/html/html/themes/ipfire/include/css/style.css
>     > @@ -258,6 +258,7 @@ input.text {
>     >  #cssmenu .has-sub ul {
>     >       display: none;
>     >       position: absolute;
>     > +     z-index: 1;
>     >  }
>     >
>     >  #cssmenu .has-sub ul li a {
>
  
paul kairis Feb. 1, 2022, 7:55 p.m. UTC | #4
Added z-index: 1; and refreshed, it works!

Thanks Leo


On Tue, Feb 1, 2022 at 12:33 PM Leo Hofmann <hofmann@leo-andres.de> wrote:

> Hi Paul,
> Yes, this patch is intended to fix exactly these problems.
> If you want to test it right away, you can apply this patch to your
> style.css in /srv/web/ipfire/html/themes/ipfire/include/css/.
> You may need to clear your browser cache after patching the CSS (CTRL +
> F5).
> @Peter thanks for your review!
> Regards
> Leo
> Am 01.02.2022 um 18:22 schrieb paul kairis:
>
> Not sure if this fixes something I saw the other day and took a
> screenshot.
> The drop menu stays in the front BUT the last two items show the various
> addons.
>
> Paul
>
> On Tue, Feb 1, 2022 at 10:16 AM Peter Müller <peter.mueller@ipfire.org>
> wrote:
>
>> Reviewed-by: Peter Müller <peter.mueller@ipfire.org>
>>
>> > Some input fields interfere with the menu items and block their use.
>> > A z-index ensures that the menu is always rendered in the foreground.
>> >
>> > Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
>> > ---
>> >  html/html/themes/ipfire/include/css/style.css | 1 +
>> >  1 file changed, 1 insertion(+)
>> >
>> > diff --git a/html/html/themes/ipfire/include/css/style.css
>> b/html/html/themes/ipfire/include/css/style.css
>> > index 661773675..96d0519f5 100644
>> > --- a/html/html/themes/ipfire/include/css/style.css
>> > +++ b/html/html/themes/ipfire/include/css/style.css
>> > @@ -258,6 +258,7 @@ input.text {
>> >  #cssmenu .has-sub ul {
>> >       display: none;
>> >       position: absolute;
>> > +     z-index: 1;
>> >  }
>> >
>> >  #cssmenu .has-sub ul li a {
>>
>
  

Patch

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 661773675..96d0519f5 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -258,6 +258,7 @@  input.text {
 #cssmenu .has-sub ul {
 	display: none;
 	position: absolute;
+	z-index: 1;
 }
 
 #cssmenu .has-sub ul li a {