search

Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

Slight issue with horizontal forms. #9

Closed barisbalic closed 6 years ago

barisbalic commented 6 years ago

Thanks very much for adding this extension, really happy to have the added consistency. I've encountered a problem, potentially by design, but I suspect it just wasn't one of your use-cases!

Firstly, if you provide a label before the input, but otherwise use the code as in your examples, no checkbox is rendered at all, an example here...

<div class="field">
  <label class="label" for="member_is_observer_account">Is observer account</label>
  <input class="is-checkbox" id="member_is_observer_account" name="member[is_observer_account]" type="checkbox" value="true">
</div>

One way to cheat is to put an empty label after the input, however when the two elements are no longer siblings, as with horizontal forms, it is no longer possible to click directly on the checkbox as the example below would demonstrate. This example is a combination of your classes with the structure that Bulma dictates for other horizontal fields.

Let me know if any of this doesn't make sense or if you need any help!

Wikiki commented 6 years ago

Hi,

unfortunately I don't see how to manage a label first structure. I'm using .is-checkbox + label CSS selector to design label. So the only way to achieve what you want is to use an empty label after the input but don"t forget to set the id on it instead of on label before.

If you know how to design an element based on the next sibling element in CSS let me know ;-)

Regards