[Inputs] labels on the left (LabelType.Horizontal)

[pm100]

I would like to have

  enter foodle: [               ]

the docs says (for HxInputXXX)

  Label to render before input (or after input for Checkbox).

Which strongly suggests that the label should appear to the left. (It would say 'above' if it meant above.)

However the label always appears above (even your examples).

Is there a way to get a left side label, and either way the doc should clarify

[hakenr]

Hi @pm100, "before" in this case means that the label element is in the DOM before the input element, no matter the final layout achieved through CSS is. The default Bootstrap CSS renders the label "above" the input. We will consider clarifying this in the doc.

@crdo Am I right? Is there anything what has to be changed in the input components to be able to achieve the desired layout or is it just CSS what has to be adjusted? Should we provide additional LabelType (now we have Regular and Floating).

We might consider creating a demo for the layout @pm100 is asking for (although it is probably almost impossible to make such layout responsive?).

[pm100]

First of all can I just say its wonderful how responsive you are and what a great toolset you have

Surprisingly the check box label is shown to the right

Also there is a stackoverflow discussion about this (at the blazor level) that you might be interested in

css - Label on the left side instead above an input field - Stack Overflowhttps://stackoverflow.com/questions/18404003/label-on-the-left-side-instead-above-an-input-field/28172607

is for an older version of boostrap tho

[crdo]

It seems that we missed it while implementing the HxInputs.

As per the Bootstrap docs https://getbootstrap.com/docs/5.1/forms/layout/#horizontal-form we need to be able to add class row on the wrapping div which means introducing InputGroupCssClass I guess but also to wrap the input itself with another div with specified grid col CSS class eg. col-sm-4. LabelCssClass is already present so that's it.

[hakenr]

@crdo @jirikanda Do we want to support that directly with LabelType.Horizontal?

[pm100]

I wonder if you could support this

https://getbootstrap.com/docs/5.1/forms/input-group/

Since that explicitly places labels either left or right

[crdo]

InputGroups are supported already... https://havit.blazor.eu/components/Inputs#InputGroups

[pm100]

aha, well hidden in the docs. Ty.

[leonardopugliese]

Maybe I missed something but is it possible to have Horizontal form? I can't find LabelType.Horizontal in components HxInputText, HxInputNumber,.. https://getbootstrap.com/docs/5.3/forms/layout/#horizontal-form

[hakenr]

Maybe I missed something but is it possible to have Horizontal form? I can't find LabelType.Horizontal in components HxInputText, HxInputNumber,..

Currently, the LabelType.Horizontal is not implemented (yet) as we're dealing with the requirement for a completely different HTML structure. However, you can still utilize our HxInputXy components without using the Label parameter and create your own horizontal layout:

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <HxInputText @bind-Value="...">
    </div>
  </div>
</form>

[leonardopugliese]

Maybe I missed something but is it possible to have Horizontal form? I can't find LabelType.Horizontal in components HxInputText, HxInputNumber,..

Currently, the LabelType.Horizontal is not implemented (yet) as we're dealing with the requirement for a completely different HTML structure. However, you can still utilize our HxInputXy components without using the Label parameter and create your own horizontal layout:

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <HxInputText @bind-Value="...">
    </div>
  </div>
</form>

Thanks a lot, that's just what I've done for now