How to suffix AUI Datepicker input addon

[Robert Meissner, modifié il y a 7 années.]

Hi, i am using the following code.

<div class="form-group input-group">
                            <aui:input name="gueltigAb" type="text" placeholder="dd.mm.yyyy" value="<%= (Validator.isNotNull(myObject.getGueltigAb())) ? dateFormat.format(myObject.getGueltigAb()) : &quot;&quot; %>" ignorerequestvalue="true">
                                <aui:validator name="required" />
                            </aui:input>
                            <span class="input-group-addon datepicker" id="<portlet:namespace/>gueltigAbPicker"><liferay-ui:icon icon="calendar" /></span>
                        </div>

The result is the following:



I want to display the datepicker "suffix" in the same line as the input field, not the label.

This is the generated HTML code:

<div class="form-group input-group">
<div class="form-group input-text-wrapper has-success">
<label class="control-label" for="_de_application_web_BasicDataMVCPortlet_gueltigAb"> Gültig-Ab <span class="icon-asterisk text-warning"> <span class="hide-accessible">Required</span> </span> </label>
<input class="field form-control success-field" id="_de_application_web_BasicDataMVCPortlet_gueltigAb" name="_de_application_web_BasicDataMVCPortlet_gueltigAb" placeholder="dd.mm.yyyy" type="text" value="Feb 2, 2017" aria-required="true"> </div>
<span class="input-group-addon datepicker" id="_de_application_web_BasicDataMVCPortlet_gueltigAb"> <span class=""> <span class="" id=""> <i class="icon-calendar"></i> <span class="taglib-icon-label"> </span> </span> <span class="taglib-text hide-accessible"></span> </span> </span>
</div>

[Robert Meissner, modifié il y a 7 années.]

I found, that i can separate form-group and input-group like this:

<div class="form-group">
    <label class="control-label" for="<portlet:namespace />gueltigAb">Gültig ab <span class="icon-asterisk text-warning"> <span class="hide-accessible">Erforderlich</span> </span></label>
    <div class="input-group">
        <aui:input name="gueltigAb" label="" type="text" placeholder="dd.mm.yyyy" value="<%= (Validator.isNotNull(vertrag.getGueltigAb())) ? dateFormat.format(vertrag.getGueltigAb()) : &quot;&quot; %>" ignorerequestvalue="true" disabled="<%= vertragFinalized %>" tabindex="9">
            <aui:validator name="required" />
        </aui:input>
        <span class="input-group-addon datepicker" id="<portlet:namespace/>gueltigAbPicker"><liferay-ui:icon icon="calendar" /></span>
    </div>
</div>

This is an improvement, but another problem is now with the display:"table" of the elements, that creates the same problem for the "require"-text. it breaks everything.