1

For our project we would like to use bootstrap input add-on's on currency fields (like explained on http://v4-alpha.getbootstrap.com/components/input-group/). I achieved this in Mendix by modelling the folowing: container with css class: form-group formatString with value: <label class="control-label">Label text</label> (i think this could also be a normal text item) container with css class: input-group * * Text with class: input-group-addon (and value €) * * Input value This generates the folowing html: <div class="mx-name-container9 form-group"><div id="formatstring_widget_formatstring_1" data-mendix-id="4687" class="mx-name-formatString3" focusindex="0" widgetid="formatstring_widget_formatstring_1"><div class="formatstring"><label class="control-label">Label text</label></div></div><div class="mx-name-container10 input-group"><label class="mx-name-label3 input-group-addon" data-mendix-id="4690">€</label><div id="mxui_widget_NumberInput_0" data-mendix-id="4691" class="mx-name-textBox30" focusindex="0" widgetid="mxui_widget_NumberInput_0"><input class="form-control" type="text" placeholder=""></div></div></div> This works fine. Except when I leave the field empty the required validation triggers and adds: <div class="alert alert-danger mx-validation-message">Dit veld is verplicht</div> under the input field. The result is that the height of the add-on is being stretched to the height of both the input and the validation div, instead of just staying at the height of the input field. Is there any way to proper implement bootstrap add-ons + validation in Mendix or do I need to make a custom widget for this?

asked 2016-04-22

1 answers