Angular UI Bootstrap datepicker is hidden within uigrid - javascript

I am integrating Angular UI Bootstrap datepicker within ui-grid, but i am facing an issue. When the user opens the datepicker by clicking a cell the datepicker is displayed but within ui-grid because of which user cannot see the full calendar and has to scroll.
Image: https://i.stack.imgur.com/AJ67m.png

It's not clear that you are using the datepicker popup instead of the inline datepicker. So, the first recommendation would be to use datepicker popup. Second, set the datepicker-append-to-body option to true to get it to attach to the document body rather than the grid cell it's defined in.

Related

CKEditor 4 having problem when used in Material UI dialog

I am working on a React project where I have used CKEditor 4 on Material UI dialog. When I am trying to use advance options like Math. I am not able to type in, anything on input, textarea fields. I have searched for solutions but all the solutions are with respect to Bootstrap Modal. If anyone has faced the same issue using the Material UI dialog. It will be a great help if you can share the solution.
Solution for Bootstrap Modal: http://stackoverflow.com/a/18554395/778587
Material UI dialog: https://material-ui.com/demos/dialogs/
Attaching the Screenshot for the reference.
Steps to reproduce the issue. - Open https://codesandbox.io/s/vv50789765 for code example
Step 1: Open CKEditor and click on the picture icon highlighted in the screenshot.
Step 2: Once you click on the picture icon another popover will be opened with some input form elements. None of the input form elements is editable, I am not able to type anything in the form elements. Please refer the screenshot.
One of the Modal props is disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
Without this property set, every time you try to change focus to one of the input fields in the ckeditor image dialog, the Material-UI Dialog (which uses Modal) automatically brings focus back to itself.
Here's a version of the sandbox with disableEnforceFocus specified which then works:
https://codesandbox.io/s/80pu0

Modifying Angular Material Datepicker popup

I would like to use the Angular Material Datepicker in my Angular application, but I a not quite satisfied with the default behavior The datepicker normally opens the calendar as a popup under the input. Instead I would like for the calendar to be permanently opened so that the user can continue to view the calendar as he selects different dates.
I understand that there is an opened property that reflects the status of the popup:
Angular Datepicker
Could I achieve the desired behavior by permanently setting the property to true to prevent the calendar from closing? I have never rally modified the default behavior of a library before...how would I go about this?
Perhaps a different approach would be separating the input from the calendar? I wonder what the best design approach would be?

jQuery UI datepicker - closes with a custom selectmenu

I have jQuery UI installed and am currently having an issue with the datepicker widget. I have the calendar displayed when you click on the icon and it is generated. The calendar has a select menu for Month and Year. I am using the jQuery UI custom select menu.
When I go to make a selection for the selectmenus, the option selected closes/discards the entire datepicker.
My assumption is that there is an event being triggered to close the datepicker when you click outside of the main widget. The custom selectmenu is not the standard 'select' menu with 'options', but rather a bunch of 'spans'. The code is simply acknowledging the click on the custom selectmenu options as a field outside of the original widget.
Any suggestions or assistance to prevent this trigger or help me locate where this event is firing from, feel free to help me out. Thanks

ng-click not working on button click inside kendo grid header template

I have a grid which is rendered dynamically based on the table selected by the user. The grid has a last column which has a header template in which I have provided a button. On click of this button I want to call angularjs controller function which I did using ng-click=ctrl.addnewRow() .
Problem I am facing is that, when the grid is loaded for the table in the first Kendo TAB the "+"(add) button does not work. When I navigate to a different tab which is using the same grid and same template, the button click works as expected. I have been scratching my head to figure out what the problem is, but could not find the problem or solution. Here is a snapshot of the page. I have used highlighting for sensitive data.
See the "+" button, and the code below in the debug window. Thats not working for the first tab.
Let me know if anyone needs some more information.
EDIT
I have created a kendo UI Dojo where the add buttons do not work for both tables. I did not add any tabs based on my scenario, but this fiddle should help

Jquery UI timepicker slider and select

I'm using Trent Richardsons Timepicker plugin: http://trentrichardson.com/examples/timepicker/
As you can see in the demo, there is a method to switch the picker to a select format.
What I'm trying to achieve is to append the select method straight underneath the default slider - at the moment you can only have either the slider, or the select, not both at once.
I can see in the docs that you can create a custom control type to change the output of the select using $.timepicker.setDefaults({controlType:myControl}) - and then writing a custom function. Should I be somehow creating a new function that merges both the slider and select together?
Any tips at what I should be doing for this?

Categories