WordPress.org

Support

Support » Plugins and Hacks » Custom Metadata Manager » [Plugin: Custom Metadata Manager] Checkbox display is confusing, labels should be next to checkbox

[Plugin: Custom Metadata Manager] Checkbox display is confusing, labels should be next to checkbox

Viewing 13 replies - 1 through 13 (of 13 total)
  • Oh yeah here’s some visual reference.

    Your screenshot that shows how checkboxes look among other fields:

    http://s.wordpress.org/extend/plugins/custom-metadata/screenshot-2.jpg?r=495326

    A screenshot from my site showing four sad checkboxes in a row:

    http://simianuprising.com/wp-content/uploads/2012/01/custom-metadata-manager-checkboxes-sparkle.png

    Plugin Author Joey Kudish

    @jkudish

    Hey Jer,

    Thanks for the suggestion and very thorough analysis of the issue! I didn’t look at it in details (yet) but I am wondering if this couldn’t be achieved with css alone since there is a class around each field (including the label) that tells us which type of field we have, couldn’t we just target checkboxes and reposition them accordingly? It might be hacky css, but at least we can leave the (elegant) php alone.

    Let me know if you’re able to submit a patch either for a css only solution or worst case for solution #1 that you suggested above. Otherwise either Mo’ or I could probably get this in, but I can’t guarantee it would be right away!

    Thanks again!
    Cheers

    Man, trying to get the checkbox before the label with only CSS sounds like a nightmare. It would have to involve assumptions about the size of the text for use in relative positioning. IMHO it’s fundamentally absurd in terms of what CSS and HTML are for. I just tried it and it looked okay but had unpredictable effects, specifically the label stopped being clickable as a way of ticking the checkbox, breaking a standard utility of HTML.

    Maybe there’s another way I’m not thinking of, but to me that seems like more hassle than adding a bit of complexity to the PHP.

    Plugin Author Joey Kudish

    @jkudish

    Fair enough 🙂

    If you get me a php patch, I’ll throw it in, otherwise I’ll write it myself likely over the weekend.

    Cheers

    Plugin Author Joey Kudish

    @jkudish

    Hey Jeremy,

    Any update on this from your side of things? I’m going to put a few hours into the plugin either today or tomorrow, and will address this. Let me know if you have anything for me!

    Cheers
    Joey

    Working on it now.

    Okay here’s a gist with the diff/patch of the changes that I think balance the needs of the situation:

    https://gist.github.com/1725905

    Let me know if the Gist isn’t a suitable way of submitting a patch. I haven’t used it before but it seems cool and I saw you guys used it in the plugin’s notes.

    In custom_metadata.php I added an array definition of $label_after_field_types which should contain all field_type‘s that need the label after the input. Currently it’s just checkbox, but IMHO this adds a layer of conceptual clarity to the situation, as well as keeping it open for other formats where this makes sense to be quickly added. I then check if the current field_type is in the array before showing the label above the switch statement and skip it if it is, in which case a second in_array() check at the bottom of the switch will show the label instead. I also moved the label HTML into the $label_str variable which is echoed, to avoid duplicating the code.

    In custom-metadata-manager.css I added display:inline-block; to divs and labels inside .checkbox. This is needed to avoid them still being on separate lines. I also changed the margins on the checkbox input itself because the default wp-admin css was making it not line up right with the label.

    Overall I think it looks good and works well this way. If you have a weird mix of checkboxes and other field_type’s then it still looks bad and confusing, but I compared my version with the old version and they both look awful if the order is bad. Ideally all checkboxes should be at the start or end of the list of fields, if you do it that way they look good and make sense. (personally I’d recommend always putting them at the start, where they can’t be confused with being part of the previous field).

    Let me know if there’s an issue with it or you need something else.

    Plugin Author Joey Kudish

    @jkudish

    Patch looks good. Gist is fine. Next time, you can also fork the github repo (https://github.com/jkudish/custom-metadata) and then submit a pull request – makes it a tiny bit easier but the gist is just fine, so no worries.

    I’ll review it and get in soon! I’ll try to brainstorm of a way we can avoid it looking awful as you explained…

    Cheers

    In terms of making it not look bad I think the only solution would be to do automatic re-ordering of the fields before display, to put the checkboxes at the start. Personally I wouldn’t push that though, it would be confusing to people and annoying to have to explain to them how to turn it off. If anything there might be a place in the docs somewhere to mention order strategies but really people will probably just figure it out when they look at their forms, or else they won’t care in which case problem solved.

    Plugin Author Joey Kudish

    @jkudish

    Yes, for sure, I wouldn’t want to enforce re-ordering of fields, that wouldn’t be a good idea.

    What do you think of checkboxes having two labels? One above and one right next to the checkbox? Redundant / confusing or the solution to our problems?

    In theory having two labels could solve some of the design problems, but fundamentally that’s not what labels are about. A heading above a checkbox should be a fieldset heading or something, the way checkboxes are supposed to use labels is as what happens when the box is ticked. Visually you’ve made the label tags into headings for each input, which looks good, but that should just be a style thing, input tags are display:inline; by default for a reason. When it comes to checkboxes then you have to make an exception to the vertical-stacking design.

    Also it would change the API in a way that makes it less clear and simple. Right now the property is ‘label’ which both makes sense based on semantics and directly refers to the tag that will contain the content. I.e. the API is perfect as-is, changing it for this use-case would hurt it.

    Plugin Author Joey Kudish

    @jkudish

    True. Fine, keeping it as is. I’ll get your patch in tomorrow or saturday at the latest along with a few other fixes for the next minor release.

    Plugin Author Joey Kudish

    @jkudish

    PS: this is now logged as https://github.com/jkudish/custom-metadata/issues/4 – Feel free to log issues there in the future (if you find any)

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Plugin: Custom Metadata Manager] Checkbox display is confusing, labels should be next to checkbox’ is closed to new replies.
Skip to toolbar