Let's say I have a Button component, and I'd like Popover A to appear upon hovering over the Button, and Popover B to appear when clicking on the button. Is this possible?
You can do this by nesting the popovers like this:
<Popover content={<div>Hover</div>} interactionKind={PopoverInteractionKind.HOVER}>
<Popover content={<div>Click</div>} interactionKind={PopoverInteractionKind.CLICK}>
<Button text="Button with two popovers"/>
</Popover>
</Popover>
There's a working example here.
In the case you don't want the hover popover to appear whenever a user clicks on the button, you can achieve this by switching to controlled usage by setting the isOpen prop. See the BP docs for more info on this.
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
In Tabbed page sample given by Prism, I want to navigate from ViewA (first tab) to ViewD(not the next tab but next navigation page).
I don't understand why this removes the navigation bar on the top:
_navigationService.NavigateAsync(nameof(ViewD));
Like PushModelAsync instead of PushAsync. So that I loose the back button on the navigation tab which is not intended.
Am I missing something here?
The reason for this is that ViewA’s parent is not a NavigationPage, the result is that the Navigation Service assumes you want modal Navigation. You simply need to add useModalNavigation: false, this will make the Navigation Service push ViewD correctly inside the Navigation Page.
I've got a tabview with 3 tabs. In the last tab, I've got a BUTTON with tap="{{ myTapEvent }}" set. I get the callback when I tap.
The problem is that if I switch to another tab (e.g. tab #1) and then back to tab #3 and tap on the BUTTON - I get 2 callbacks.
Switch between the tabs N times - when I tap on the BUTTON , I get N callbacks.
So looks like the event is being registered everytime the tab is selected but not being deregistered on selecting another tab.
If this is not the proper place, where do I report this bug.
Operator error!
I had the following:
<Button text="{{ to_date }}" onTap="{{ onDateTap }}"/>
The attribute for tap event was onTap instead of tap.
It does work - but causes the multiple callbacks.
I have create ADF application which has page that using panel splitter and command tool bar button.
1.How to make panel splitter width fixed and and cannot be moved in the ADF pages?
Since currently, i can move the splitter using mouse and adjust the size.
2.How to disable command toolbar button or change the colour after click? Reason I do
like this is to let user know which page that currently view right now.
For example: I have navigation bar(using command Toolbar button)
-HOME
-REGISTRATION
-VIEW PROJECT
If I choose REGISTRATION button,it will display registration page.REGISTRATION button
will disable or change colour until other button has been choose.
Can anyone help?Need this thing urgently.
Thanks in advance.
Q1) set the disabled property of the splitter to true
<af:panelSplitter id="ps1" disabled="true" ... />
Q2) How about putting an information on the page so that the user can read on which page he is. For this you don't have to changes anything if another page has to add to the application.
If you realy like to implement it with the button styles you can set an attribute in pageflow scope to the last clicked button id, then you set the disabled property of each button in the toolbar ro an EL like
disabled="#{pageFlowScope.lastButtonClicked eq 'ctb1'}"
Where ctb1 is the ID of the button. On the button ctb1 you add an
<af:setActionListener from="#{'cbt1'}" to ="#{pageFlowScope.lastbuttonClicked}"/>
Then you may need to add some partial triggers to see the result.
EDIT:
You can use the same techniqure to switch e.g. the background color of the button. For this you use the EL on the inlineStyle attribute of each button like:
inlineStyle="#{pageFlowScope.lastButtonClicked eq 'ctb1'?'background-color:Aqua;' :''}"
Then the last clicked button should come with Aqua background color.
UPDATE:
#{(sessionScope.teamPage eq 'MGRV')?'background-color:rgb(99,206,255); color:red; font-weight:bolder;':'background-color:transparent;'}
I want to create a radio button custom control in my ASP MVC application. I am using HTML Helpers for this (I hope it is the right way). I want to know if there is a way to make the radio button unchecked when clicked.
Any ideas ?
Thanks
I want to know if there is a way to make the radio button unchecked when clicked.
That's a very weird requirement and you probably should be using checkboxes instead of radio buttons, but anyway, it is possible with javascript. If we suppose that the radio button is checked initially and you want to uncheck it when clicked:
$(function() {
$('#id_of_radio_button').click(function() {
$(this).removeAttr('checked');
});
});
But really, that's very weird. Radio buttons normally work by having them in groups: you have a couple of radio buttons and you can check only one in the group. So by selecting a different radio button in the group you are unchecking the current one.
Checkboxes on the other hand are not grouped. You can check/uncheck their values by clicking on them.