InlineField labelWidth not working

[doubleutf]

I am using the InlineField component but it seems the labelWidth property is having no effect. It’s missing classes “gf-form-label width-10” which is correctly rendered in the FormField component. Using @grafana/ui 7.3.7. Please provide help.

Screenshot:

Rendered HTML:

Code:

    <div className="gf-form-group">
      <div className="gf-form">
        <FormField
          label="Tenancy OCID"
          labelWidth={10}
          inputWidth={30}
          onChange={onPathChange}
          value={jsonData.path || ''}
          placeholder="ocid1.tenancy.oc1..."
          required={true}
        />
      </div>
      <div className="gf-form">
        <InlineField label="Default Region" labelWidth={10}>
          <Select options={regionOptions} onChange={onRegionChange} width={30} />
        </InlineField>
      </div>
</div>

[marcusolsson]

Have you tried wrapping it in a <InlineFieldRow>?

<InlineFieldRow>
  <InlineField label="Default Region" labelWidth={10}>
    ...
  </InlineField>
</InlineFieldRow>

Have you tried changing the labelWidth? I’m not sure gf-form-label and the InlineField uses the same scales, so you might need to set different values to get the same visual size as the FormField.

Let me know if the problem persists!