Styling issues with input-addons in DDF

[skateman]

I'm trying to reimplement the endpoint detection for openshift/kubernetes in the DDF provider forms and I found this styling issue:

{
  "component": "text-field",
  "name": "endpoints.hawkular.hostname",
  "label": "Hostname (or IPv4 or IPv6 address)",
  "isRequired": true,
  "validate": [
    {
      "type": "required-validator"
    }
  ],
  "inputAddon": {
    "after": {
      "fields": [
        {
          "component": "input-addon-group",
          "name": "detect-hawkular-group",
          "fields": [
            {
              "component": "button",
              "name": "detect-hawkular-button",
              "label": "Detect"
            }
          ]
        }
      ]
    }
  }
}

Parent issue: ManageIQ/manageiq#18818

[himdel]

So.. what's the issue? The button shouldn't have the border?

[skateman]

I guess the border is unnecessary + the button is larger than the input.

[himdel]

OK, to get this (in pure bootstrap 3)...

the html needs to be..

<div class="input-group">
  <input class="form-control" style="border-color: red;">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" style="border-color: red">
      Action
    </button>
  </div>
</div>

(without border-color by default)

Looking..

[skateman]

Yeah, I got almost the same, but the .input-group and .input-group-btn are not div but span and if I replace them with divs, there's no change 😕

[himdel]

Is how the same html looks when I replace our dashboard content with it.
So, looks like patternfly itself is not the culprit..

[himdel]

But seeing the same issue when using the schema, it looks like the generated HTML is..

<span class="input-group">
  <input name="endpoints.hawkular.hostname" id="endpoints.hawkular.hostname" class="form-control" value="">
  <span class="input-group-addon">
    <button name="detect-hawkular-button" type="button" class="btn btn-default">Detect</button>
  </span>
</span>

[himdel]

So, just changing input-group-addon to input-group-btn is probably enough:

[himdel]

-          "component": "input-addon-group",
+          "component": "input-addon-button-group",

works :)

[skateman]

Great, thanks!