I am trying to change the position of pop-up calender(p-calender) from PRIMENG datepicker component. I found that in order to target that dynamic popup, styling should be done in style.css (root css). I am able to change the position of pop-up (i want the popup to be displayed towards left). But, the issue is i am not able to target the datepicker popup in particular component and the change i have made is impacting the whole application as popup is appendTo body because of that any class or ID is not selecting the particular datepicker instrad all datepicker in application. Please let me know if you have any solution to choose that particular component
I am using angular 7
Related
I am using a bootstrap popover to display an instance of fancytree. On the initial click of the button that triggers the popover, everything loads and initializes correctly.The user can select items in the tree, search for items in the tree, etc. When the popover is dismissed and then shown for the second (or more) time, only the original static html that was in the data-content attribute is shown. After looking at the DOM while this happens, it appears that the popover is just replacing the dynamically generated content that fancytree created with the static content in the data-content attribute.
My question is, is there a way/option for the popover to not reinitialize the content every time it is displayed and just hide it instead?
Because I have an instance of fancytree created dynamically, I can't just swap out the HTML as it would no longer "link" to the fancytree object.
Any help is greatly appreciated!
This is not a solution to the issue of preventing the bootstrap popover from re-initializing the content inside of it but I did end up going with the bootstrap dropdown instead since the content that is displayed by it does not get reset every time a user opens it.
I need to use a tab component of some sort and was looking at jquery-ui. It's already in the project I'm working on. But I don't want to have separate content divs as the controls for the content of each tab are all the same. Basically the UI includes a dropdown, a couple of text boxes and some radio buttons. The only thing dynamic are the items in the dropdown, captions for text boxes, etc. So I merely need to update these when I get a tab click event. The number of tabs is unknown until the component is initialized and the tabs are added dynamically.
Is there a way to do use the jquery-ui tabs control in this manner? In other words, without content divs? When I tried it this way, the tabs don't behave as expected (active tab color, etc., don't work as they normally do).
I am new to bootstrap and AngularJs.
I am trying to use bootstrap modal dialog box to display additional details in a column of a table. I want the bootstrap modal to popup from where the details button in every row is but I can't seem to change the default position of the modal. It always pops up at the top and not where the mouse was clicked. Is there any way to re position it so that it pops up from right where the button is so that it looks more relevant to a particular element and less like an alert box.
Thanks.
use tooltip with html template and you can change the trigger to click so it will resolve your problem
The layout in my app has a menu on the left and content on the right. When a user selects a menu item on the left I open the correct Xpage. This is pretty standard.
I have transitioned to a Bootstrap menu on the left. Once loaded, state changes (menu selection, accordion drop downs) are handled via CSJS. So this gives me the opportunity (if possible) to refresh the content window on the right without having to submit the whole xpage again.
But I do not think you can do a partial refresh from one custom control to another.
Is there any way to do this or anyway to structure the app so I can do this?
May be you can do something with postMessage in CSJS. I have used it to do actions, like resize in a XPages when it is embedded inside a widget in IBM Connections. See the interaction in the OpenNTF project 'Generic HTML and XPages Widgets for IBM Connections', https://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-8YRN3J
More details how to use postMessage. https://davidwalsh.name/window-postmessage
Probably the easiest way is to wrap your right side contents with a panel and give that panel an id. Then when the user changes something on the left menus do a partial refresh of the panel. You might need to type in the panel id as it will not be available on the id picker in partial refresh.
Howard
I am using ng-file-upload / ngImgCrop and ngDialog to make a dynamic app using angularjs 1.5 version.
I have an input field which trigger by another element. I want to open the pop-up and give the ability to crop the image using above libraries. It's working without the pop-up but when I use the popup , the image not preview.
If I add an input field inside the popup to select , it's working. Seems like it fails if I select the image before open the popup.How to solve this?
I tried http://jsfiddle.net/danialfarid/xxo3sk41/590/ way and open the popup with input change event but no success.