Although all form controls react perfectly to the [disabled] parameter, the DatePicker doesn't. This is a real shame
Related
I am trying to make a form builder which should have a functionality of drag and drop feature. Also the widgets when dropped onto the form should have a additional control of changing the particular widgets functions as per their choice. Like for suppose if a time picker has been dropped the person should have option to choose from 12/24hrs clock.
I tried adding the widget in one page but when dragging and dropping them on the form the edit option goes away as it is there in the default page. Please help with a suitable answer.
The kind of functionality I need
Also you can refer jotform
I am using a daterangepicker in my project. It's developed with help of third party library daterangepicker.js But, it's not supporting keyboard accessibility. Author of this library is not ready to add the feature as it's 11 years old library.
Can someone help me to add the keyboard accessibility for this date picker in my application. I appreciate the suggestions and ideas on this.
More details on exact issue:
We attached the date picker to a input field. And opening the datepicker as soon as input field gets the focus. But, not able to navigate the datepicker using keyboard(arrow, tab etc..)
I am expecting to make date range picker keyboard accessible.
I have a multistep Drupal 7 form. I'd like to show it in a Bootstrap Popup.
This form works fine on a normal page however when I put it into a Bootstrap popup it closes the popup when the first button is pressed.
I use drupal_render(drupal_get_form('MYFORMNAME_form')) to put the form into the popup body.
How can I make this multistep form work properly in the popup?
when you say bootstrap popup, do you mean a modal window (http://getbootstrap.com/javascript/#modals)? Modals in bootstrap are defined inside the body of the page and just hidden/shown as needed. If you want one to act as its own window, you need an iframe in it, because submitting the form will not trigger whatever mechanism you put in place to show the modal dialog in the first place.
Another option is to use code to re-show the modal, with the form at whatever stage it is at, with each page load (next button, etc.)
A last option is to do all of the form navigation via AJAX. Then you don't ever need to put the form inside an iframe nor include code to re-show the modal with each submission of the form, since the page never gets refreshed.
IMHO the iframe is easiest, and a decent option if you don't have any qualms about iframes. You just need to place the form in a separate page and include it inside the iframe. Some theming work will enable you to turn off the normal page chrome that will make your modal look like a miniature version of your site -- you probably don't want your header, navbar, footer, etc. inside the modal.
You could use the Popup forms module. It claims:
Works well with multi-step forms. Just don't add [the] "Next" button id to
[the] 'close_buttons' array to keep [the] popup open [when navigating between steps].
This solution is not using a Boostrap Modal ("Bootstrap popup") though rather a jQuery UI dialog. It requires a bit of custom coding to use this module. Example code is provided on the project page.
I'm working something like a dynamic menu, where you click some radio buttons and it shows a specific form, each radio control matches to a different form.
Examples from the showcase always base themselves on the Tabs widget and I don't need that behaviour.
I opted for placing all the forms inside one Canvas and hide/show them accordingly (Not sure this was the best idea, if someone knows better I would like to hear it)
Now my problem is that every onClick event has to .show() one form and .hide() the other 9. that is annoying.
Is there a way to "get" the current displayed child in the Canvas and hide it?
If what you want is basically mutex display, you could put all the components as members of a Layout instead of a Canvas, then use setVisibleMember(). That hides all other members.
I am building a little registration page that is going to be accessed via an iPad at a sales office as a kiosk. When I first received the page from the web design company I noticed that the way they set it up was the labels of the input fields appear inside the field (like a watermark). The watermark is cleared out once you focus on the field and then restored if there is no value when you blur off the field.
I noticed that they had a couple password fields in the page that was showing the words PASSWORD and RETYPE PASSWORD in them. I don't want people's password exposed in the Sales Office, however changing the fields to type password means that the watermark labels become masked.
Since they were using jQuery to do the watermark in the input fields, I found another jQuery solution that would swap out the TEXT input field for a PASSWORD input field on focus. When I tested it on my PC in Safari it worked like a charm. However when I was testing the page with my iPhone I noticed that the jQuery field swap on focus only works if I click on the field with my finger. If I am using the on screen keyboard and clicking NEXT to get the field, then the field doesn't get swapped and the on screen keyboard goes away. I have to physically click the field to get the swap to fire. Is there some other even that I can use to trigger the swap instead of focus?
$('#txtRetypePassword-clear').focus(function() {
$('#txtRetypePassword-clear').hide();
$('#txtRetypePassword-password').show();
$('#txtRetypePassword-password').focus();
});
Of course as soon as I posted, I did a little more reading on DiveIntoHTML5.ep.io and saw that HTML5 supports "placeholders" so I thought to myself, I wonder if you can put a placeholder on a PASSWORD input field. YOU CAN!
So I get to rip out all that jQuery because HTML5 supports everything the page was trying to do!