In Blazor, you can load content dynamically by putting it in an #if block and then making that condition true, e.g. on a button click.
I have a Bootstrap dropdown whose contents are loaded when the dropdown is first clicked. For some reason, the right alignment is not honored on the first click of the dropdown button but is on each subsequent click to open it. There is something about the initial render and the CSS not being honored. I am not sure why this is happening.
Here is an example (Blazor server-side): https://blazorfiddle.com/s/yc5m9rv4
Since Bootstrap dropdowns user popper.js, the solution was found through that. Bootstrap provides an update method to refresh the dropdown's position.
To solve this issue, the update method just needed to be called after the dropdown is rendered.
Here is an update, with this solution, to the example in the question: https://blazorfiddle.com/s/t24r1753
Related
I am facing problem on removing unknown division created during opening of a mat-select.
When I am opening a modal and after selecting values ,I need to click directly on the button given on side but because of some property of modal a div is getting created and I have to do two clicks on the button to apply changes.
Right now when I am clicking outside the mat-select modal to make it close then clicking on button it is going correct. But I need to open modal -> select options -> direct click on the button given.
Something in the background is blocking the first click when opening a mat-select modal. I am not able to see what is that. Is there some css property that can be block ? I am not getting exact hidden problem.
Modals in Angular Material create something that's called 'backdrop' by default. This backdrop is like a layer right behind your modal, filling the whole page. If you click somewhere on the page, your target will be the backdrop, which then closes the modal.
So for you to achieve, what you want to achieve, you have the following options:
edit the backdrop behavior to not prevent the default click action, so that clicks on the backdrop close the modal but also trigger the action you want
remove the backdrop on opening of the modal (this can be done by setting a flag hasBackdrop in the open methods config parameters) and close the modal programmatically by triggering the close method of the MatDialogRef
This is standard modal behavior, you should include all your needed options either before opening a modal or in the modal itself after being opened.
I'm experiencing a frustrating problem with MaterializeCSS dropdown links created on Wordpress Menus. I can see the link when I hover over the top level items, e.g. About FAIRDOM, but I can't click any of them. I know it's an issue somewhere perhaps in having a hidden element above that may be catching the click event, but I can't see where. Anyone with any idea of where the issue is in this site http://beta.fair-dom.org/ ?
MaterializeCSS built their dropdowns "mobile-first". Essentially, what that means for you is that the JS that powers the dropdowns explicitly disables the href on click for all dropdowns. This is a because, on mobile, a user cannot hover and can only touch.
However, if you're still wanting to get around this, you can try out the following (assuming you're using jQuery):
<script>
$('.dropdown-button').click(function() {
window.location.href = $(this).attr('href');
}
</script>
Try sticking that just before you close the body tag,
when user clicks on Add button, then a pop up button will be opened with certain form elements (like textinput, date field, text area).. When i used 'TAB' inside this form,it is not working. I found in couple of Questions / forums that we need to create an instance of FocusManager and then bring/activate focus for the pop up. But still i didn't see the tab working inside the form. In order to tab order working inside a pop up, what steps we need to follow.
I tried using focusmanager and property like tabfocusenabled, tabenabled and also added taborder inside each form element. But no luck.
Iam using Flash Builder 4.5 and using spark components for development.
Is there any workaround for this problem?
Thanks in Advance,
Regards
Srinivasan
Thanks for all your responses.
Finally the issue has been solved by one of my colleague. Problem is , the form has been loaded inside Horizontal accordion (flexlib HACCORDION). So inorder to draw focus inside the accordion to child elements, we need to add 'hasFocusableChildren="true"' for the HAccordion (horizontal accordion component). Adding this property solves the tab order problem.
I have also pasted the code below:
In my flex app I have custom tooltips on buttons that hide and show based on user context.
The problem that I dealing with is that when I call my showTips() function I only want to show tooltips on the buttons that visible in the view. So buttons that on a un-selected tab (tabNavigator) should not show the tooltips.
For some reason all tooltips are showing.
Is there a way to detect if a button is not in current view, like on a un-selected tab?
If you gave us some code I could check this out, but would this work?
if(button.parent.visible) { showTip(button);}
Instead of custom coding for each button, make use your tabnavigator's creation policy is set to "auto".
Check this link for more details
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html
In asp.net, am trying to populate a dropdownlist box with very long text. I have fixed the width of list on the page and i don't want to change its size as it would affect my page layout. On clicking the dropdownlist, the text gets truncated to the size of the dropdown. I want to see the entire text without any truncation, without changing the size of the dropdownlist box..Also if there are any third party controls which would solve this problem?Would be very helpful if there's a solution for this.
Update:
Right now am trying a dropdown box in Jquery that will wrap the text if it exceeds the size..but again the problem is it works fine on an independent solution but when i integrate it with my application, it does not read the .css file and it does not do any formatting(style, font, alignment) that it is supposed to do according to the .css file.Any idea why this is happening?
The problem that you're describing is restricted to IE (it might be fixed in the latest version, I haven't tested).
In the past, I've had success with binding javascript methods to the onClick event on the drop down to increase the width, and the onBlur event to set the width back to its original value.
You might be able to use jQuery to create a tooltip like thing that appears when you hover over each option.
something like
// this executes on page load - just like asp.net Page_load()
function pageLoad(){
// attach a mouseover event to each option in your dropdown
$("#myDropdown option").mouseover(function(){
// get the text from that option
var text = $("#"+this.id).text();
// display that text in a small tooltip
showToolTip(text);
});
}
function showToolTip(text){
// display in some way
}
there's a javascript library called wz_tooltip available at walterzorn.com
hope that helps