Support

Account

Home Forums Add-ons Repeater Field Repeater UI gets wonky after last update

Solved

Repeater UI gets wonky after last update

  • Hey Elliot, after updating to the latest stable release, I noticed that the ui for some (but not all) Repeater Fields started to look wonky. Attached is a screenshot of what I am talking about

  • these are repeaters within repeaters

    • Elliot

    • November 9, 2013 at 10:08 am

    Hi @jrstaatsiii

    This issue is caused by the tinyMCE editor requiring more space than you are giving it.

    I can’t imagine that this was not an issue prior to the 4.3.0 update. If so, are you able to downgrade and show a screenshot?

    I’m not sure what the solution is here. You need a certain amount of width of the WYSIWYG field to display all it’s toolbar buttons, and your nested situation is causing the limited amount of space.

    Not sure I can provide a solution for this one.
    Sorry

    Thanks
    E

  • Hey Elliot – Thanks for the response, and that was my first thought as well. However this is happening on a 20in screen at full width, where there is plenty of room. I will clone the site into staging and downgrade to see if the problem was there before the last upgrade, but this is something that I only recently noticed.

    • Elliot

    • November 10, 2013 at 3:05 pm

    Hi @jrstaatsiii

    The screenshot shows the main metabox taking upi t’s full available width within the main column.

    The right hand of the browser shows the white space created below the ‘publish’ metabox.

    Doesn’t look like there is much space to fit the nested repeaters.

    Perhaps you could provide another screenshot that shows where the extra space is that you expect the WYSIWYG to appear?

    Thanks
    E

  • Elliot,

    I had a similar issue with the recent update as well. Client’s site has repeaters within repeaters and they complained that the fields would extend beyond as well as beneath the containing borders causing the wysiwyg fields to be unusable.

    My initial thought was “your screen is just too small”. Looked into it a little more in-depth and compared it to a cloned site on the version 1.0.1 repeater plugin. It turns out that there was a change in the 1.1.0 css that was causing the issue.

    On line 5 of the input.css file you have

    table-layout: fixed;

    If I comment out this line, the editor displays as expected (expected by the client).

    For my client I’m overriding this style attribute with a custom filter in my functions.php.

    function admin_css() { ?>
    	<style type="text/css">
    		.repeater > table{
    			table-layout:auto!important;
    		}
    	</style>
    <? }
    add_action('admin_head', 'admin_css');

    That should hold them over and even help with future updates, but could you explain the reason for this simple style change? Is my modification going to come back and bite me?

    Thanks,

  • I can confirm that this fixes the problem. Thank you wglassbrook

    • Elliot

    • November 13, 2013 at 4:07 pm

    Hi guys

    Great to see the code. I’ll look into the fix, but could you please also attach some screenshots showing the before / after?

    Thanks
    E

  • Glad I could help jrstaatsiii.

    As requested, here are some before and after images. These where taken from a 1280×900 screen. Even with the nested repeaters there should be plenty of room for the UI.

    Before: Nested repeaters version 1.0.1 and prior…

    Nested repeaters vr. 1.0.1

    After: Nested repeaters version 1.1.0…

    Nested Repeater fields after 1.1.0 update

    • Elliot

    • November 14, 2013 at 10:47 am

    Hi @wglassbrook

    Thanks for the screenshots, but can you please re-upload them showing the full screen so I can see all other metaboxes?

    Thanks
    E

  • For reference, I threw together a test page with a nested repeater with an unmodified version 1.1.0. Here are the results…

    1024px
    1024 Browser Width

    1280px
    1280 Browser Width

    1440px
    1440 Browser Width

    Anything wider and it’s not an issue, but I can’t reasonable expect all clients to have anything larger than 1280.

    • Elliot

    • November 17, 2013 at 11:03 am

    Hi @wglassbrook

    Thanks for the screenshots. Can you also provide the same with repeater field v1.0.1 so we can compare?

    Thanks
    E

  • Repeater v. 1.0.1 examples

    1024px
    v101 - 1024px

    1280px
    v101 - 1280px

    1440px
    v101 - 1440px

    • Elliot

    • November 18, 2013 at 8:36 am

    Hi @wglassbrook

    Can’t thank you enough for these screenshots!
    I’ll have this reverted and fixed for the next version

    Thanks
    E

    • Elliot

    • November 18, 2013 at 11:34 am

    Hi guys

    The repeater field CSS rule ‘table-layout:fixed’ has been removed and I have released version 1.1.1

    Thanks for all your help!
    E

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.