Bug #2467: http://www.webtoolkit.eu/widgets/navigation/navigation-bar responsive bug - Wt - Redmine

Actions

Copy link

Bug #2467

closed

http://www.webtoolkit.eu/widgets/navigation/navigation-bar responsive bug

Added by Anonymous almost 11 years ago. Updated over 9 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Koen Deforche

Target version:

3.3.4

Start date:

11/25/2013

Due date:

% Done:

Estimated time:

Description

In Chrome and in Firefox, when I make a browser thin (<700px) and navbar shows data, when I click Help in Menu text of Contents, Index, About is over "Enter search item" edit, it should be hidden (not visible). Link:http://www.webtoolkit.eu/widgets/navigation/navigation-bar

Files

Download all files

fix-wt.png (74.8 KB) fix-wt.png	Screenshot After Possible Solution	Josh Lampco, 11/25/2013 11:42 PM
abs-pos-wt.png (63.3 KB) abs-pos-wt.png	Screenshot of Problem	Josh Lampco, 11/25/2013 11:42 PM

Actions

Copy link Download all files

Updated by Josh Lampco almost 11 years ago

File fix-wt.png fix-wt.png added
File abs-pos-wt.png abs-pos-wt.png added

I am experiencing this issue also in Google Chrome Version 31.0.1650.57. However, I have come across it while implementing the navigation menu widget within my own development project. I am using Bootstrap V2.2.2 and Wt V 3.3.0.

It seems as though the JavaScript associated with Wt, is adding absolute positioning to the unordered list associated with the class "dropdown-menu". When I change the positioning to static, as it is in the bootstrap-responsive.css v2.2.2, and also delete the following style

.nav-collapse .dropdown-menu {
    display: block !important;
}

which is found in wt.css, I see that the layout is corrected.

I have attached screenshots of the bug as seen here. In the developer tools console at the bottom of the attached images, I have shown what I changed.

Actions

Copy link

Updated by Josh Lampco almost 11 years ago

After further testing, simply adding static positioning will not fix the problem. A media query will need to be used as the menu needs static positioning only when the browser window is less than 979px.

@media (max-width: 979px) {
    .nav-collapse .dropdown-menu {
        position: static !important;
    }
}

Keep in mind that at this point my solution is very "hacky". Hopefully, someone can come up with a better solution that does not involve media queries and overwriting the JavaScript.

Actions

Copy link