Controls in a Repeating Section - Setting Width

[mikeallenbrown]

Web app running 5887.

I've spent way too much time trying to do what should be very straight forward. I have a repeating section with two text-boxes. Each box width is set to 50%. I'd expect each text box to fill half of the repeating section but they don't. They remain at their default widths.

Ashampoo_Snap_Monday, July 22, 2019_14h48m10s_004_.png

Ashampoo_Snap_Monday, July 22, 2019_14h48m25s_005_.png

It appears only static widths work here (ie 500px, 5in, etc.). That can't be right. I can set the repeating section container to a percent value so the controls within should be able to do the same.

Inspecting the elements I see this...

Ashampoo_Snap_Monday, July 22, 2019_14h53m27s_006_.png

I may be able hack the widths using $("DLG1.V.R1.REPEATINGSECTION_1.I1.CONTENT").childNodes and then loop through everything but I shouldn't have to. Setting the percentage as I stated above should just work.

Am I missing something really obvious?

[iRadiate]

Re: Controls in a Repeating Section - Setting Width

Mike perhaps % is not supported, try using vw instead. I tried this and it seems to work.
You might have to use something a little less than 50 each textbox, there seems to be some amount of space taken up by something (padding, etc.)

ie) width: 48vw

RepeatSection.jpg

[mikeallenbrown]

Re: Controls in a Repeating Section - Setting Width

Thanks, Stephen.

Using vw doesn't quite work out. These text boxes need to be responsive (hence me wanting to use %). Switch your test component to mobile and you'll see the unfortunate results.

[iRadiate]

Re: Controls in a Repeating Section - Setting Width

Ah, sorry. Perhaps if you can't find a way to brute force it, contact Selwyn and see if he can add it as a feature request (I suspect it's not a bug rather just not implemented for some reason).
I can't make it work with % either.

[Davidk]

Re: Controls in a Repeating Section - Setting Width

The problem is that I can't see a way that Alpha lets you get at the CONTENT div of the row. That's the parent that is preventing the 50%.

However, your 3rd screenshot don't look right. You have 50% set for each textbox, but the A5CWLayout div is 2in... with is the default. They should read 50%. Are you sure that's the correct screenshot?

Nevertheless, what you need to do is adjust the CONTENT div yourself...

var rsCnt = {dialog.Object}._getRepeatingSectionRowCount('REPEATINGSECTION_1');
for(i=1;i<=rsCnt;i++){
	$('{dialog.ComponentName}.V.R1.REPEATINGSECTION_1.I'+i+'.CONTENT').style.width='100%';
}

[mikeallenbrown]

Re: Controls in a Repeating Section - Setting Width

I was experimenting with this code earlier...

var count = {dialog.object}._repeatingSectionLogicalToPhysicalRow('REPEATINGSECTION_1');
//var count = {dialog.object}._getRepeatingSectionRowCount();
var i;

if(count==false){
	count=1
}

//debugger;

for(i = 1; i <= count; i++){
	var _row = $('{dialog.ComponentName}.V.R1.REPEATINGSECTION_1.I'+i+'.CONTENT').childNodes;
		
		_row[0].style.width="45vw";
		_row[2].style.width="45vw";
}

Needs a lot more attention of course.

[mikeallenbrown]

Re: Controls in a Repeating Section - Setting Width

Wrote to Alpha about this. Selwyn's response....

percentage widths are not supported for controls in repeating sections. you can use javascript (and the responsive genie) to make the repeating section responsive


{dialog.Object}.setRepeatingSectionColumnWidth('TEXT1','600px');
{dialog.Object}.setRepeatingSectionColumnWidth('TEXT2','600px');


Haven't tried this just yet.

[Davidk]

Re: Controls in a Repeating Section - Setting Width

Involving the Responsive Layout Genie and sets of Rules and Actions seems overkill when all you want to do is apply a width to a div.

I'd go directly after the div.