Problem with Multi-Select Dropdown on IE

Hello,

I have an issue with "Multi-Select Dropdown" dield on IE (11).
When I select an item on my list, all others disppears and the list get blank...
It happens when I am on IE with "Bootstrap" Style (Form Theme). On others styles it works good...

Could you please help me ?

Thank you in advance.

Hi Fredd,

Please post a link to the form so I can take a quick look. I can't immediately think of any reason why selecting an item would have any effect on the rest of the form unless you have set some JavaScript events that are being triggered on selection.

Bob

Hi Bob,

Here is the link : http://www.balguerie.com/index.php?option=com_chronoforms5&chronoform=1445-Pre-Prod-Depot_candidature_fr
Problem occurs on "informations poste" tab / "Site demandé" field.

The only JS is a load action on setup area, that manage special messages, like "jQuery.gvalidation.errors.required = "Ce champ est obligatoire. Merci de bien vouloir le renseigner";

Hi Fredd,

it looks as though you have size set to 0 and multiple to 1

Please try setting the size to 5 (or more) and I think that multiple should be set to multiple.

Bob

I put 5 for the size and "yes" to multiple, but the problem persist...

Hi Fredd,

There's some odd interaction in the CSS. I added this and got it to stay in view. It doesn't look as good in IE as it should but it works.

.gbs3 option {
  box-sizing : content-box !important;
}
.gbs3 select{
  box-sizing : content-box !important;
}

Bob

Hi bob,

I am confused, but I can't see where to put this css code...
Could you tell me please ?

Thank you in advance.

Hi Fredd,

I tested in my browser - I suggest that you try it in a Load CSS action in the ON Load event of your form - move the action up before the HTML (Render Form) action.

Bob

Bob,

I copy / paste the css code on a "loas css" event but it is still not working on IE11...

[attachment=0]Custom CSS.PNG[/attachment]

Hi Fredd,

That looks correct to me - but I don't see any sign of the CSS on the form page. Do you have caching turned on for the site?

Bob

I rename the for to be sure :
http://www.balguerie.com/index.php?option=com_chronoforms5&chronoform=1623-Pre-Prod-Depot_candidature_fr

By my side, I can see the code : [attachment=0]CustomCSS-IE.PNG[/attachment]
But items continues to disapear on IE.

Hi Fredd,

I'm out of suggestions - if I Click one of the box-sizing settings to turn it on or off then it seems to display.

You could try commenting out the box-sizing lines in /libraries/cegcore/assets/bootstrap/css/bootstrap.css

.gbs3 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* box-sizing: border-box; */
}
.gbs3 :after,
.gbs3 :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* box-sizing: border-box; */
}

Bob

Hi Fredd,

I experimented a bit more with this and the 'best' solution I could find was to switch the form style to GCoreUI on the Styles tab and to use this CSS

.gbs3 option {
  box-sizing: content-box !important;
}

That seems to prevent the options from disappearing.

The alternative is possibly to use a CheckBox Group in place of a drop-down if the list is not too long.

Bob

Hi Bob,

Ok, thank you for your answer, I will try to workaround by using CheckBox Group, for GCoreUI style is not very nice for me...

Thank you again.