Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#18211 closed defect (worksforme)

MenuBar and MenuBarItem CSS bug

Reported by: dojonovice@… Owned by: dojonovice@…
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.10.0
Keywords: Cc:
Blocked By: Blocking:

Description

If I use MenuBar? and MenuBarItem?, sometimes I am able to select two items (first bug). In this case (two selected menu items) the menu bar starts jumping if hover event is active (probably border property problem) - second bug.

I tested it with modified CSS - less.

<section class="menu-bar">

<div data-dojo-type="dijit/MenuBar">

<div data-dojo-attach-event="click : item1Action" data-dojo-props="selected : true" data-dojo-type="dijit/MenuBarItem">Item 1</div> <div data-dojo-attach-event="click : item2Action" data-dojo-type="dijit/MenuBarItem">Item 2</div> <div data-dojo-attach-event="click : item3Action" data-dojo-type="dijit/MenuBarItem">Item 3</div>

</div>

</section>

CSS

.dijitMenuBar {

background : none; background-color : #F0F0F0; border : 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9;

}

.dijitMenuItemLabel:first-child {

margin-left : 12px;

}

.dijitMenuItemLabel {

background: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-weight: bold; font-size : 1.4em; color : #B9927F;

}

.dijitMenuItemHover {

color : @blue-text; border-color : transparent;

}

.dijitMenuItemSelected {

.menu-navigation-container .menu-bar .dijitMenuItemHover;

}

Attachments (1)

menu-bar.html (2.1 KB) - added by dojonovice@… 5 years ago.
It seems that it is responsive design bug. Make browser smaller than menu width and do mouseover action over second line item.

Download all attachments as: .zip

Change History (15)

comment:1 Changed 5 years ago by dojonovice@…

CSS correction - last rule

.dijitMenuItemSelected {

.dijitMenuItemHover;

}

The problem is with data-dojo-props="selected : true". How can I define default selected value? Is this right way?

Last edited 5 years ago by dojonovice@… (previous) (diff)

comment:2 Changed 5 years ago by bill

Owner: set to dojonovice@…
Status: newpending

Please attach a test case using the "attach file" button. It should be as small as possible to still reproduce the problem, almost always a single HTML file that we can load in the browser (i.e. not PHP, JSP, etc.).

Then, give exact instructions on how to reproduce the problem using your attached test file, including the browser and version to use.

I see your description in the ticket description that:

sometimes I am able to select two items (first bug). In this case (two selected menu items) the menu bar starts jumping if hover event is active (probably border property problem) - second bug.

However, that is too vague for me to understand and reproduce the issue.

comment:3 Changed 5 years ago by dojonovice@…

Status: pendingnew

dijitMenuItemHover has probably incorrect padding-top property.

correct padding-top property for my case is padding-top : 6px;, please check it.

second probably bug, if I set data-dojo-props="selected : true" to any menu item, I expect when user choose another menu item that the selected menu item will be umarked.

Is it right? In this case the selected menu is still selected and user see two selected items in menu.

Please take the word sometimes as everytime. I thought that it is sometimes.

Last edited 5 years ago by dojonovice@… (previous) (diff)

comment:4 Changed 5 years ago by bill

Status: newpending

You need to give exact instructions how to reproduce this or I will close the ticket.

comment:5 Changed 5 years ago by dojonovice@…

Status: pendingnew

Hi Bill

Sorry for delay but I was testing it again. It seems that original claro design works fine. It is strange because I dont change / set padding. Dont know what exactly is bad. I am going to test it last time with this sample what I posted here in isolated environment. Original issue is a part of larger application and not directly reproducible.

Last edited 5 years ago by dojonovice@… (previous) (diff)

comment:6 Changed 5 years ago by dojonovice@…

Got it. But check my CSS first please if a bug is not there.

CSS

<style>

.claro .menu .dijitMenuBar {

background : none; background-color : #F0F0F0; border : 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9;

}

.claro .menu .dijitMenuItemLabel:first-child {

margin-left : 12px;

}

.claro .menu .dijitMenuItemLabel {

background: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-weight: bold; font-size : 1.4em; color : #B9927F;

}

.claro .menu .dijitMenuItemHover, .claro .menu .dijitMenuItemSelected {

color : blue; border-color : transparent;

}

</style>

<div class="menu" data-dojo-type="dijit/MenuBar">

<div data-dojo-props="selected : true" data-dojo-type="dijit/MenuBarItem">Item 1</div> <div data-dojo-type="dijit/MenuBarItem">Item 2</div> <div data-dojo-type="dijit/MenuBarItem">Item 3</div> <div data-dojo-type="dijit/MenuBarItem">Item 4</div> <div data-dojo-type="dijit/MenuBarItem">Item 5</div>

</div>

In this case you can achieve buggy situation when you resize browser. Make browser smaller width, let line wrap. Wrapped line is jumping. But I have this issue without wrapping in my app.

Last edited 5 years ago by dojonovice@… (previous) (diff)

comment:7 Changed 5 years ago by dojonovice@…

And please give me a response/feedback about selected:true state. If it is correct behavior or not.

comment:8 Changed 5 years ago by bill

Resolution: worksforme
Status: newclosed

Sorry, I have no idea what issue you are facing. I don't even know what you mean by "selecting" a menu item.

If you can't give a test case or instructions to reproduce the problem, I can't help.

Last edited 5 years ago by bill (previous) (diff)

comment:9 Changed 5 years ago by dojonovice@…

Tomorrow I prepare test case. I thought that you have simple testing template where only insert CSS and markup and markup will be automatically parsed by parser. My currenct test case has own dojoConfig, but I use dojo-props for parsing and CDN URIs.

Changed 5 years ago by dojonovice@…

Attachment: menu-bar.html added

It seems that it is responsive design bug. Make browser smaller than menu width and do mouseover action over second line item.

comment:10 Changed 5 years ago by dojonovice@…

Hi Bill, look at attached test case. It seems that it is responsive design bug. Make browser smaller than menu width and do mouseover action over second line item. But if I am not wrong I had this problem without wrapped line. But in test case it worked.

Second issue, let me now if user is able to select two items at once. Now if I set a default item, it is selected and user can select another item what means, that two items are selected (two blue items).

comment:11 Changed 5 years ago by dojonovice@…

Last edited 5 years ago by dojonovice@… (previous) (diff)

comment:12 Changed 5 years ago by bill

I see you attached a test case. What do I do to reproduce the problem? What is the behavior you expect, vs. the actual behavior you see?

comment:13 Changed 5 years ago by dojonovice@…

  1. If I use data-dojo-props="selected : true", I expect that if user select e.g. Item 2, the Item 1 will be unmarked / deselect.
  2. If browser has size e.g. 400px and you see 2 lines, move mouse over any item from second line. You will see a little line jump.

comment:14 Changed 5 years ago by bill

Sounds like you are misunderstanding how to use menu. You aren't supposed to set data-dojo-props="selected : true". Forgot to write that explicitly in the documentation, but selected is a readonly property that is set and removed internally by the menu widgets as you open and close submenus.

Last edited 5 years ago by bill (previous) (diff)
Note: See TracTickets for help on using tickets.