row span in a tables data cell (form layout) - Forum - Rollbase - Progress Community

row span in a tables data cell (form layout)

 Forum

row span in a tables data cell (form layout)

  • Default RB alignment.JPG

    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?

  • 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

  • Is there a work around to span the data cell to make for better alignment?


  • 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

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


  • 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.

  • 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