row span in a tables data cell (form layout)

Posted by ByronB on 17-Dec-2014 10:48

Hi guys

I am trying to get a multi select picklist to span rows because as soon as there is a multi select picklist with the size more than 1 it throws off the alignment of the rest of the controls. It doesnt look very good. 

I have tried using a script component and building up the control manually:

<td class="rbs_rightLabel3" id="rbi_L_contactRole">Contact Role</td>
<td class="rbs_leftDataCol3" id="rbi_F_contactRole" rowspan="6">
<select name="contactRole" tabindex="29" multiple="true" size="6">
<option value="11565">Something</option>
<option value="11566">Send Licences</option>
<option value="11567">Something</option>
<option value="11568">Something</option>
<option value="11569">Something</option>
<option value="11570">Something</option>
</select>
</td>

this throws the columns alignment for that section right off (pushes everything to the right).

Is there anyway around this?

All Replies

Posted by ByronB on 17-Dec-2014 10:49

This is the layout after using the script component

Posted by Santosh Patel on 17-Dec-2014 12:12

Could you share the actual HTML that renders based on what you have done?

I presume what you have is direct TD tags inside the script component. The thing is the data shown in page editor is rendered in TD and TR tags generated by Rollbase. There is possibly a way around using javascript but it would help if I could have a look at your actual HTML around that row, basically the Table with id/class rbs_mainComponent (or similar)

Posted by Gian Torralba on 17-Dec-2014 12:23

Hello,

If you are trying to mimic the field layout by manually creating multiple select inside a script component. It will not align since a script component generates a <td> wrapper before the actual code is displayed.

Thank you,

Gian

Posted by ByronB on 17-Dec-2014 12:28
Is there a work around to span the data cell to make for better alignment?


Posted by Gian Torralba on 17-Dec-2014 12:46

Hello,

You can try this using JQuery.

<script>
$(document).ready(function(){
  $("#multi_select_id").unwrap();
});
</script>

This will remove the parent element thus rendering the alignment properly.

Hope this helps.

Thank you,

Gian

Posted by ByronB on 17-Dec-2014 12:48
Hi Santosh

The code above is what I used inside the script component. You mentioned a js  route?


Posted by Santosh Patel on 17-Dec-2014 13:06

I was about to suggest similar to what Gian said. Does it still misalign?

Sent using CloudMagic


On Thu, Dec 18, 2014 at 12:18 AM, ByronB <bounce-ByronB@community.progress.com> wrote:

Reply by ByronB
Hi Santosh

The code above is what I used inside the script component. You mentioned a js  route?


Stop receiving emails on this subject.

Flag this post as spam/abuse.

Posted by ByronB on 18-Dec-2014 03:24

Hi guys, yeah its still misaligned. Looking at the markup its inserting:

<td class="detailHTMLCol" colspan="2">

</td>

between the data cells, its amending my script data cell at the end of the row and not a data cell within a data cell.

Posted by Santosh Patel on 18-Dec-2014 04:11

Apparently jquery's unwrap states "The matched elements (and their siblings, if any) replace their parents within the DOM structure."

if your TD is as is (that is it's html content) then the browser does some tidying and puts it appropriately as it finds a td inside a td and hence adds it as a sibling rather than a child.

I'd suggest on putting a marker div in the script component and then using $('#my_unique_td').parent().html("Your_td_html_content");

Posted by ByronB on 18-Dec-2014 04:44

Something like this?

<script>

$('#rbi_F_contactRole').parent().html("

<div>

<td class="rbs_rightLabel3" id="rbi_L_contactRole">Contact Role</td>

<td class="rbs_leftDataCol3" id="rbi_F_contactRole" rowspan="6">

<select name="contactRole" tabindex="29" multiple="true" size="6">

<option value="11565">Billing & Finance</option>

<option value="11566">Send Licences</option>

<option value="11567">Send Leads To</option>

<option value="11568">Secure Portal Admin</option>

<option value="11569">TC Technician</option>

<option value="11570">Beta Tester</option>

</select>

</td>

</div>

");

</script>

I am getting a JS error:

SyntaxError: Unexpected token ILLEGAL

Posted by Santosh Patel on 18-Dec-2014 05:02

you are breaking a javascript string with new lines... either put all the content in one single line or go about doing this

$('#rbi_F_contactRole').parent().html("<div>"+

"<td class="rbs_rightLabel3" id="rbi_L_contactRole">Contact Role</td>"+

"<td class="rbs_leftDataCol3" id="rbi_F_contactRole" rowspan="6">"+

"<select name="contactRole" tabindex="29" multiple="true" size="6">"+

Posted by Santosh Patel on 18-Dec-2014 05:07

and I noticed the double quotes in your html... you need to replace them all with single quotes

<script>

$('#rbi_F_contactRole').parent().html('<div>'+

'<td class="rbs_rightLabel3" id="rbi_L_contactRole">Contact Role</td>'+

'<td class="rbs_leftDataCol3" id="rbi_F_contactRole" rowspan="6">'+

'<select name="contactRole" tabindex="29" multiple="true" size="6">'+

'<option value="11565">Billing & Finance</option>'+

'<option value="11566">Send Licences</option>'+

'<option value="11567">Send Leads To</option>'+

'<option value="11568">Secure Portal Admin</option>'+

'<option value="11569">TC Technician</option>'+

'<option value="11570">Beta Tester</option>'+

'</select>'+

'</td>'+

'</div>');

</script>

Posted by ByronB on 18-Dec-2014 05:59

Thanks for the snippet Santosh

I have used it and nothing gets rendered in that space on the form??

Posted by ByronB on 18-Dec-2014 06:07

Sorry you said replacing all double quotes??:

<script>

$('#rbi_F_contactRole').parent().html('<div>'+

'<td class='rbs_rightLabel3' id='rbi_L_contactRole'>Contact Role</td>'+

'<td class='rbs_leftDataCol3' id='rbi_F_contactRole' rowspan='6'>'+

'<select name='contactRole' tabindex='29' multiple='true' size='6'>'+

'<option value='11565'>Billing & Finance</option>'+

'<option value='11566'>Send Licences</option>'+

'<option value='11567'>Send Leads To</option>'+

'<option value='11568'>Secure Portal Admin</option>'+

'<option value='11569'>TC Technician</option>'+

'<option value='11570'>Beta Tester</option>'+

'</select>'+

'</td>'+

'</div>');

</script>

I am getting an Illegal token error

Posted by ByronB on 18-Dec-2014 06:09

Shoule the whole html snippet be in double quotes?

$('#rbi_F_contactRole').parent().html("'<div>'+

'</div>'");???

Posted by ByronB on 18-Dec-2014 06:12

According to this:

http://api.jquery.com/html/

.html()

This method does not accept any arguments. ???

Posted by ByronB on 18-Dec-2014 06:20

Have tried this, no error but the control doesnt show:

<script>

$('#rbi_F_contactRole').parent().html("<div><td class='rbs_rightLabel3' id='rbi_L_contactRole'>Contact Role</td><td class='rbs_leftDataCol3' id='rbi_F_contactRole' rowspan='6'><select name='contactRole' tabindex='29' multiple='true' size='6'><option value='11565'>Billing & Finance</option><option value='11566'>Send Licences</option><option value='11567'>Send Leads To</option><option value='11568'>Secure Portal Admin</option><option value='11569'>TC Technician</option><option value='11570'>Beta Tester</option></select></td></div>");

</script>

Posted by Santosh Patel on 18-Dec-2014 06:29

This will help understanding Javascrip Strings www.w3schools.com/.../js_strings.asp

Your last snippet is fine just that it is being called before the said content is ever loaded on the page. To execute stuff after the complete page has loaded use jquery onready function.

<script>

$(document).ready(function() {

$('#rbi_F_contactRole').parent().html("<div><td class='rbs_rightLabel3' id='rbi_L_contactRole'>Contact Role</td><td class='rbs_leftDataCol3' id='rbi_F_contactRole' rowspan='6'><select name='contactRole' tabindex='29' multiple='true' size='6'><option value='11565'>Billing & Finance</option><option value='11566'>Send Licences</option><option value='11567'>Send Leads To</option><option value='11568'>Secure Portal Admin</option><option value='11569'>TC Technician</option><option value='11570'>Beta Tester</option></select></td></div>");

});

</script>

Posted by ByronB on 18-Dec-2014 06:46

I have tried it and nothing is showing up bud

Posted by ByronB on 18-Dec-2014 07:09

I have tried it for a list of checkboxes but also does not show up:

<script>

$(document).ready(function() {

$('#rbi_L_contactRole').parent().html("<div><td class='rbs_rightLabel3' id='rbi_L_communication'>Communication</td><td class='rbs_leftDataCol3' id='rbi_F_communication'><input type='checkbox' name='communication_44418' id='communication_44418' checked='true'> <label style='cursor:pointer' for='communication_44418'>Do Not Solicit</label>  <input type='checkbox' name='communication_44419' id='communication_44419' checked='true'> <label style='cursor:pointer' for='communication_44419'>Do Not Email</label>  <input type='checkbox' name='communication_44420' id='communication_44420' checked='true'> <label style='cursor:pointer' for='communication_44420'>Do Not Mail</label>  <input type='checkbox' name='communication_44421' id='communication_44421'> <label style='cursor:pointer' for='communication_44421'>Do Not Call</label>  </div>");

});

</script>

Posted by Gian Torralba on 18-Dec-2014 09:44

Hello,

This should work. You need to replace the parent element by using the replaceWith method in JQuery.

<div id="divElem"></div>

<script>
  $(document).ready(function(){
    var divElem = "<td class='rbs_rightLabel3' id='rbi_L_contactRole'>Contact Role</td><td class='rbs_leftDataCol3' id='rbi_F_contactRole' rowspan='6'><select name='contactRole' tabindex='29' multiple='true' size='6'><option value='11565'>Billing & Finance</option><option value='11566'>Send Licences</option><option value='11567'>Send Leads To</option><option value='11568'>Secure Portal Admin</option><option value='11569'>TC Technician</option><option value='11570'>Beta Tester</option></select></td>";
    $('#divElem').parent().replaceWith(divElem);
  });
</script>

Hope this helps.

Thank you,

Gian

Posted by ByronB on 18-Dec-2014 09:48

Worked like a charm thank you, nice one.

Posted by ByronB on 19-Dec-2014 04:09

I have managed to get the control to appear correctly but the data wont bind?

Posted by Gian Torralba on 22-Dec-2014 08:10
Hello,

Can you provide a screenshot so that we may have an Idea on what is happening?

Thank you,
Gian
This thread is closed