row span in a tables data cell (form layout)

This is the layout after using the script component

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)

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

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

Hi Santosh

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

Sent using CloudMagic

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.

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");

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

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">"+

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>

Thanks for the snippet Santosh

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

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

Shoule the whole html snippet be in double quotes?

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

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

According to this:

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

.html()

This method does not accept any arguments. ???

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>

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>

I have tried it and nothing is showing up bud

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>

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

Worked like a charm thank you, nice one.

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

Hello,

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

Thank you,
Gian