35
Views
4
Comments
Solved
[Dropdown Button] Two small issues
dropdown-button
Reactive icon
Forge component by Steven Decock
Application Type
Reactive

Hello,

Just two small issues:

  • the OnClick event handler of DropdownButton_ButtonMenuItem should be non-mandatory (when I use a link inside I must still declare a handler that is overridden by the link)
  • I some cases the menu opens in an improper place hiding the main control (see the attached image); it happens when you click on the main label

Besides - it looks quite well.

Regards

Tomasz



Capture.PNG
Solution

Hi Tomasz,

I now see where the confusing came from.  The default items that are added in the Items placeholder when you add a DropdownButton to your screen indeed added two DropdownButton_ButtonMenuItem elements with Links inside of them.  That made no sense.
I created a new release that fixes this problem.  When using DropdownButton_ButtonMenuItem it makes no sense to add a Link to the ButtonContent placeholder.  If you do not want a Button item, use the DropdownButton_MenuItem block instead.  You can add a Link in there.


I chose to keep the OnClick on DropdownButton_ButtonMenuItem mandatory, as the OnClick on Button itself is also mandatory.  What is the point of using a Button if there is no action on OnClick? Making it mandatory helps in not forgetting to develop the action.


Regarding the menu appearing on top of the button sometimes: indeed, I was able to reproduce this in Firefox.  I made a small change in the CSS that should solve it:  

.dropdown-button-menu {    
    top: 30px;
}


Either upgrade to the latest version of the component or add the above CSS to you project.


Regards,

Steven

Hi Steven,

OK, it makes sense.

Menu appearing issue: yes, now it seems to work better (after I've cleared the browser's cache, of course :-)).

Thanks for so quick reaction.

Regards

Tomasz

Hi Tomasz,

Regarding your first point of the OnClick event handler in DropdownButton_ButtonMenuItem.
The DropdownButton_ButtonMenuItem adds a Button to the menu.  You shouldn't put a Link inside the placeholder, as this would give you a link inside a button in the HTML (check the HTML in your application). 
If you want to add a link to the menu, use the DropdownButton_MenuItem instead.  That will not add a Button around your Link.

As to the second issue you mentioned:  I'm afraid I will need some more information on how to reproduce this.  It would be really helpful if you could create a small demo application you can share that demonstrates this problem.

Regards,

Steven

Hi

I know that I can put a Label instead of a link. But I can use link, as well. Note that when I create a new instance of DropdownButton it gets created with links. Nevertheless - when I use links I must create a fake handler for the OnClick event. I personally would set this handle as optional - but it's your choice.

Regarding the second issue - no, I have no "reproduce steps". I've clicked here, clicked there and sometimes it occurs. Maybe it is because of FireFox, that I use?

What I can observe is that the list is created always over the main button and then - moved to the proper place. It looks as if sometimes it weren't moved.

But it is not crucial.

Regards

Tomasz

Solution

Hi Tomasz,

I now see where the confusing came from.  The default items that are added in the Items placeholder when you add a DropdownButton to your screen indeed added two DropdownButton_ButtonMenuItem elements with Links inside of them.  That made no sense.
I created a new release that fixes this problem.  When using DropdownButton_ButtonMenuItem it makes no sense to add a Link to the ButtonContent placeholder.  If you do not want a Button item, use the DropdownButton_MenuItem block instead.  You can add a Link in there.


I chose to keep the OnClick on DropdownButton_ButtonMenuItem mandatory, as the OnClick on Button itself is also mandatory.  What is the point of using a Button if there is no action on OnClick? Making it mandatory helps in not forgetting to develop the action.


Regarding the menu appearing on top of the button sometimes: indeed, I was able to reproduce this in Firefox.  I made a small change in the CSS that should solve it:  

.dropdown-button-menu {    
    top: 30px;
}


Either upgrade to the latest version of the component or add the above CSS to you project.


Regards,

Steven

Hi Steven,

OK, it makes sense.

Menu appearing issue: yes, now it seems to work better (after I've cleared the browser's cache, of course :-)).

Thanks for so quick reaction.

Regards

Tomasz

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.