Forums

Hi !

I'm using select inputs in my form and need to customize them. SO basically with JS I change the select element in a UL. Everything works fine. But the JS Validation bubble (tips) goes on the top left of the screen and not on the right place. This is because my select element is display:none; I think. Do you have any suggestion ? Maybe the validation bubble search for specific class to know where to be place ?

Thanks !

Hi Mushr00m,

The best answer is to re-write your JavaScript so that it modifies the select drop-downs instead of hiding them,

Alternatively you can add your own validations in your JavaScript, There are some examples of this in the FAQs,.

Bob

Hi !
It's a basic implementation "bootstrap like" by adding divs and display none the select. So I can make it look the way I want. Is there a way to modify the way the tips position is calculate ?

Thanks

Hi Mushr00m,

Please check that the ChronoForms inputs are still in the correct location on the page.

Are you using a RocketTheme template? If so please turn off input formatting on the Template Advanced tab as this moves some elements off the page and gives the error you describe.

Bob

No it's a custom template and a custom JS script that hide the select and create a div and a list with the options in it. I talked about bootstrap because it's kind of the same result as their dropdown menu.
So yes the element is still in the same place, but because the select is with the style display:none, the ChronoForm script can't find its position and put the bubble on the top left of the window, its calculation is base on the document and not the hidden select. If I just put the select as visibility:hidden it works.

But it's not a solution because by doing this, the select still take some place and berak my design. I just want to change some code of the JS that position the bubble to make it possible to calculate on the hidden select or a parent element that my JS create. Or event on the 'cfdiv_select' class that is always here.

Thanks

Hi Mushr00m,

Please post a link to the form so I can take a quick look.

Bob

Sorry it's on local developpment.

But if you want to test it, in any chronoform V4 just put a style display:none on a select and you'll see the validation bubble on the top left corner of the website.

Hi Mushr00m,

Your script needs to disable the select as well as hide it.That will disable the validation, Please see this FAQ

Bob

Yes but if I disable it I'll not have the validation bubble at all. My need is to keep it but place it well, even if the element is hidden. so maybe place it by it's parent container and not the whole window, that's why I think I should modify the code that calculate the position of the tip. Not completely disable it.

Hi Mushr00m,

I can’t imagine why you might want to validate a hidden input . . .

I hope you find a way to get that working,

Bob

I think i wasn't clear about what I do ^^

You can see a similar implementation here : http://silviomoreto.github.io/bootstrap-select/
My script Hide a select and create a div that contain the same options, etc. So it's possible via CSS to style it. Because you can't style properly a select input on all browser. Doing it with divs is a piece of cake.
So to do that (like in the plugin in the link), I need to hide the select and place a div instead with my scrypt. By doing that the Chronoform JS validation fails because it can't find the place of the select input that is hidden. But my user see the divs that mimic the select input.

Hi Mushr00m,

OK - that helps. I think that you can do it by adding to the JavaScript after you call the fancy drop-down

$('.selectpicker').selectpicker();

(a) to disable the existing drop-down so that will remove the misplaced message, and
(b) to add the corresponding validation to the new drop-down. The FAQ I linked to has the code to do that in CFV4.

Bob

Thanks, I'll have a look at it !