plugins adding a row on edit panels

phiw13 · 2016-03-07 01:10:39

These row display poorly (out of alignment) compared to the core generated ones.
The core generated rows have a .txp-form-field class in addition to a row specific class, whereas the plugin-rows miss the first one.

example plugins: rah_sitemap (on the category and section edit panels), wet_native (on the users edit panel)

screenshot:
The select widget should be on the same line as the label, compare to the previous row ( role /publisher)

I think the problem is the inputLabel function, more specifically $fallback_class.

I modified that (adding txp-form-field):

-  $fallback_class = 'edit-'.str_replace('_', '-', $name);
+  $fallback_class = 'txp-form-field edit-'.str_replace('_', '-', $name);

That seems to do the trick. But note, it doesn’t help in case a plugin inserts a textarea – core rows add an extra txp-form-field-textarea class (example: rah_sitemap does that on the preferences panel).

There may be more to it that I missed though…

Bloke · 2016-03-07 10:55:57

phiw13 wrote #298173:

I think the problem is the inputLabel function, more specifically $fallback_class.

Good sleuthing and an interesting solution, but I don’t know about this offhand. Would have to look into it further due to inputLabel being widely used throughout core and plugins. Don’t want to impose too much, but as this is only a fallback class there’s scope to do so, since any calls that don’t want it can override it. Plus it gives plugin authors less to deal with at transition time.

The question probably comes down to if people/the core end up overriding it more times than they use the default fallback. Will investigate, thanks.

phiw13 · 2016-03-08 00:37:48

Bloke wrote #298177:

Good sleuthing …

:-)

The question probably comes down to if people/the core end up overriding it more times than they use the default fallback. Will investigate, thanks.

Afaict —and as I said, I may have missed something— Core always set the classes it needs. I did test that potential fix, going through all panels to see if something unexpected happened. Everything displayed as it should. Plugins of course is another matter, but from what I’ve been able to test (limited, unfortunately), it shouldn’t be a cause for concern, it is a fallback class after all.

~~I’ll add an issue on Github~~ I’ve added an issue on Github.

For the time being, I can patch up that layout issue in my stylesheet.

Updated to add link to Github issue

Last edited by phiw13 (2016-03-08 01:49:09)

philwareham · 2016-03-08 10:38:54

I think this indeed should be done. The expected layout pattern for all forms field from now on is:

<div class="txp-form-field example-1">
    <div class="txp-form-field-label"><label for="example_1">Long text</label></div>
    <div class="txp-form-field-value"><input id="example_1" name="example_1" type="text" size="32"></div>
</div>
<div class="txp-form-field example-2">
    <div class="txp-form-field-label"><label for="example_2">Medium text</label></div>
    <div class="txp-form-field-value"><input class="input-medium" id="example_2" name="example_2" type="text" size="8"></div>
</div>
<div class="txp-form-field example-3">
    <div class="txp-form-field-label"><label for="example_3">Select</label></div>
    <div class="txp-form-field-value">
        <select id="example_3" name="example_3">
            <option value="" selected="selected"> </option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
        </select>
    </div>
</div>
<div class="txp-form-field example-4">
    <div class="txp-form-field-label">Radio buttons</div>
    <div class="txp-form-field-value">
        <input class="radio active" id="example_4_0" name="example_4" type="radio" value="0" checked="checked">
        <label for="example_4_0">No</label>
        <input class="radio" id="example_4_1" name="example_4" type="radio" value="1">
        <label for="example_4_1">Yes</label>
    </div>
</div>
<div class="txp-form-field txp-form-field-textarea example-5">
    <div class="txp-form-field-label"><label for="example_5">Textarea</label></div>
    <div class="txp-form-field-value"><textarea id="example_5" name="example_5" cols="64" rows="4"></textarea></div>
</div>
...etc...

See design patterns documentation here.

Bloke · 2016-03-08 11:01:16

Oki doke. Done

phiw13 · 2016-03-08 11:58:09

Thanks!

Textpattern CMS

Textpattern CMS support forum

#1 2016-03-07 01:10:39