I have an xml form (ui component) where two inputs are inside of a container where breakLine is set to false so the inputs are side by side. This is working for the most part, the issue is that the label for the second input is not visible. There’s a space where the label should be, it just won’t render.
I’ve tried adding <labelVisible>true</labelVisible>
to the input with the missing label, and to the container, both have no effect.
I’ve added a label to the container, which overlaps the first inputs label.
I tried to remove the first inputs label while leaving the container label on, hoping for some reason that it would allow the second label to render properly, which also did not work.
<container name="payment_container">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="breakLine" xsi:type="boolean">false</item>
<item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
<item name="componentType" xsi:type="string">container</item>
<item name="required" xsi:type="boolean">false</item>
</item>
</argument>
<field name="payment_method" formElement="select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate="true">Payment Method</label>
<dataScope>payment_method</dataScope>
</settings>
<formElements>
<select>
<settings>
<options>
<option name="check" xsi:type="array">
<item name="value" xsi:type="string">check</item>
<item name="label" xsi:type="string">Check</item>
</option>
<option name="cash" xsi:type="array">
<item name="value" xsi:type="string">cash</item>
<item name="label" xsi:type="string">Cash</item>
</option>
<option name="store_credit" xsi:type="array">
<item name="value" xsi:type="string">store_credit</item>
<item name="label" xsi:type="string">Store Credit</item>
</option>
</options>
<caption translate="true">- Please Select -</caption>
</settings>
</select>
</formElements>
</field>
<field name="payment_record" formElement="input" sortOrder="20">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">purchase_record</item>
</item>
</argument>
<settings>
<labelVisible>true</labelVisible><!-- doesn't seem to make any difference -->
<dataType>text</dataType>
<label translate="true">Payment Record</label><!-- the label that isn't rendering -->
<dataScope>payment_record</dataScope>
<validation>
<rule name="required-entry" xsi:type="boolean">false</rule>
</validation>
</settings>
</field>
</container>
Any ideas on what I can do to make the label render properly?