Repeater Field Width

[raydale]

I am looking for the best approach enabling control of the repeater inputfield widths in the PW admin. I would like to drive the width of an individual repeater field (width and float for a more grid like layout) by a field within that repeater.

For example, a repeater might have the following fields:

• title
• body
• images
• grid_width

I would like to drive the repeater width in the PW admin by 'grid_width'. So, if the field 'grid_width' had a value of '50' the repeater field would have the following CSS - 'style=width: 50%;' applied to it's containing 'li' element. In this way a visible grid of repeater fields could be built with custom control over the repeater widths. This grid could then be more of a wysiwyg of how the repeater fields would work in the frontend and would be much easier for the client / content manager to predict everything would look.

[kongondo]

You mean something like this? Those are 3 fields within a repeater given individual widths, in this case 30%, 35% and 35%...the rest PW does automatically. They could as well have been 60%, 40%, 100%. In this case, the former two would be lined up side by side and the latter drop down to its own row...

If this is what you want:

When editing the repeater field, under Details, where you add fields to a repeater, hover your mouse over the field name, click on the arrow that appears to the right of the field name, a modal will open up and set your width there..Fields given custom widths always have those widths displayed on the far right side of the field name when you view Templates->Basics

Edited for clarity 

Edited July 18, 2013 by kongondo

[raydale]

Thanks for the response Kongondo. However, no, that's not quite what I am looking for. You are pre-setting the individual field widths within the repeater in your example. What I am looking for is to be able to set the width of the repeater itself - dynamically via an input field that can be selected by the content manager.

Below is an illustration of what I mean. Repeater Columns #1 and #2 have been dynamically resized by the the Grid Width field paramaters chosen. They take up 50% of the available width because '4 Columns' have been chosen for each of the Grid Width fields (this particular example is arbitary and is based on a maximum 8 grid width, but could equally be litterally a percentage input).

[kongondo]

OK, I see. Even though one can also set the width of the repeater itself using the method Setup->Fields->Input.., that will affect all of that repeater's instances, so, will not achieve what you want...

[ryan]

I understand what you are trying to do, but can't currently think of a way you can do it (at least not in any straightforward manner). Even if you could do it from the CSS side, there are other factors like sorting (which is designed to work vertically), and the add new items actions, etc. 

[raydale]

Thanks Ryan. Judging by your response, this would even be complex to build in a module due to the vertical sorting?

[Soma]

You actually can do matrix sorting quite easy with floated elements and jQuery sortable, but the config needs to be changed to vertical and horizontal, not only vertical. I've done it for the Imagefield and it works ok. 

[ryan]

Thanks Ryan. Judging by your response, this would even be complex to build in a module due to the vertical sorting?

From what Soma said, sounds like maybe it isn't that complex. I don't have much bandwidth to get into it now, but if anyone else wants to figure out how to do it and make a test case, we could support it in the core. 

[raydale]

You actually can do matrix sorting quite easy with floated elements and jQuery sortable, but the config needs to be changed to vertical and horizontal, not only vertical. I've done it for the Imagefield and it works ok. 

Thanks Soma, I will take a look at your module and attempt to tackle a module. I am not a developer (but learning), so I may have some questions when I get started if that's okay?