This topic is locked

Bootstrap

9/15/2017 4:12:24 AM
PHPRunner General questions
T
Tempus_Erus author

Hi,
Using bootstrap and cerulean, I have a pop up window using the in built phpr function available.
Within the pop up you have the familiar fields, name address and so forth.
I have added the addition a couple of check boxes 'A' and 'B'. They are their own individual fields. I would like to put these side by but no matter what I try it appears below.
This could be a CSS issue, however if someone could point me in the right direction I would appreciate.
Thanks

romaldus 9/15/2017

Perhaps some screenshots can help

HJB 9/15/2017
  1. Set the layout of checkbox list control to Horizontal
  2. Add the following to 'Custom CSS' section in Style Editor
    .rnr-horizontal-lookup {

    width: 250px !important;

    }

T
Tempus_Erus author 9/16/2017


  1. Set the layout of checkbox list control to Horizontal
  2. Add the following to 'Custom CSS' section in Style Editor
    .rnr-horizontal-lookup {

    width: 250px !important;

    }


Thanks for the reply and code.
All checkbox set to horizontal. The custom CSS makes no difference. I ma sure its a CSS issue.

T
Tempus_Erus author 9/19/2017

The Layout of Bootstrap is that it displays: block and width: 100% to almost all our form controls, forms will by default stack vertically. I have got my head around col-md-3, col-md-6, which play a pivotal point in columns.
The issue I have is there is an amount of nested <DIV> making this more complex to integrate. I wold need to apply any side by side form method to the labels and checkbox field, but in turn the main container appears to give a different to what is expected results.
I have looked at the free form, and not a fan, though I wonder if there is anything you can achieve with the rnr-ff-cwrap class?
I am still playing with Bootstrap but any further ideas welcome.

admin 9/20/2017

I really need to see some pictures that would explain what needs to be changed.

T
Tempus_Erus author 9/24/2017



I really need to see some pictures that would explain what needs to be changed.


I currently have this set up in a 'pop up window' (the pop up would comfortably allow 2 check boxes and txt side by side and in any case would scroll):


I would like to produce the following.


I understand the use of columns and nesting etc, but having great difficulty with this, particularly as this includes the <labels> not just the fields. I have also look at free form function as a workaround but this is not really an option.
The code supplied above
.rnr-horizontal-lookup {

width: 250px !important;

}
is interesting so far as this is similar to the freeform code generated. The use of !important could 'override' any set CSS and have tried playing around, but I feel I am back to the structure of the columns again....
Thanks in advance.

HJB 9/24/2017

https://stackoverflow.com/questions/32115319/change-vertical-alignment-into-horizontal-for-bootstrap-checkboxes
... for inspiration purposes only ... (not tested), as it speaks directly on the issue by 100%.

jadachDevClub member 9/24/2017

This may be a hack, but it seems to work. Edit the code in the editor (html view)

<div class="col-md-3">

</div>

<div class="col-md-6">

<table>

<tr>

{BEGIN Section1_fieldblock}

<td>{$label dbo_Sections Section1} </td>

<td>&nbsp; </td>

{BEGIN Section1_label}

<td>{$Section1_editcontrol} </td>

{END Section1_label} {END Section1_fieldblock}

<td>&nbsp; </td>

{BEGIN Section2_fieldblock} {BEGIN Section2_label}

<td>{$label dbo_Sections Section2} </td>

{END Section2_label}

<td>&nbsp; </td>

<td>{$Section2_editcontrol} </td>

{END Section2_fieldblock}

</tr>

</table>

</div>

<div class="col-md-3">

</div>


Here is what I get.

HJB 9/25/2017

@Jerry - Fantastic ..., so, I took the liberty to create a transparent draft logo in highly compressed PNG format to honor your post.
https://imgur.com/a/yW5Ct

jadachDevClub member 9/25/2017



@Jerry - Fantastic ..., so, I took the liberty to create a transparent draft logo in highly compressed PNG format to honor your post.
https://imgur.com/a/yW5Ct


LOL, I am so honored!!! Thank you <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=83322&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

H
headingwest 9/26/2017

Hi All, I've just had to solve the same issue, tried both DIV tags and tables. But now I can't hide the fields using BeforeDisplay:

$pageObject->hideField("showfirstname");


It's like the wrappers don't work once you change the CSS or the layout.

{BEGIN showfirstname_label}

{$label webform showfirstname}

{END showfirstname_label}


Jerry - is it possible for you to test this on your mock up page?? Here is my page:

jadachDevClub member 9/27/2017



Hi All, I've just had to solve the same issue, tried both DIV tags and tables. But now I can't hide the fields using BeforeDisplay:

$pageObject->hideField("showfirstname");


It's like the wrappers don't work once you change the CSS or the layout.

{BEGIN showfirstname_label}

{$label webform showfirstname}

{END showfirstname_label}


Jerry - is it possible for you to test this on your mock up page?? Here is my page:




It will work, but you need to make sure all classes are in the right spot. Here is my revised markup with the classes in the TDs that works per your request.

Also, I really do not recommend doing too much of this. In my opinion, it is better working with the product the way it wants to work. Long term you will be better off. Although I understand there are times when it is necessary.

<DIV class="col-md-3">

</DIV>

<DIV class="col-md-6">

<TABLE>

<TBODY>

<TR>

{BEGIN Section1_fieldblock}

<TD class="form-group {$fielddispclass_Section1}" data-signal-error-for="Section1{$id}" data-fieldname="Section1">

{$label dbo_Sections Section1}

</TD>

<TD>

&nbsp;

</TD>

{BEGIN Section1_label}

<TD class="form-group {$fielddispclass_Section1}" data-signal-error-for="Section1{$id}" data-fieldname="Section1">

{$Section1_editcontrol}

</TD>

{END Section1_label}

{END Section1_fieldblock}

<TD class="form-group {$fielddispclass_Section2}" data-signal-error-for="Section2{$id}" data-fieldname="Section2">

&nbsp;

</TD>

{BEGIN Section2_fieldblock}

{BEGIN Section2_label}

<TD class="form-group {$fielddispclass_Section2}" data-signal-error-for="Section2{$id}" data-fieldname="Section2">

{$label dbo_Sections Section2}

</TD>

{END Section2_label}

<TD class="form-group {$fielddispclass_Section2}" data-signal-error-for="Section2{$id}" data-fieldname="Section2">

&nbsp;

</TD>

<TD class="form-group {$fielddispclass_Section2}" data-signal-error-for="Section2{$id}" data-fieldname="Section2">

{$Section2_editcontrol}

</TD>

{END Section2_fieldblock}

</TR>

</TBODY>

</TABLE>

</DIV>

<DIV class="col-md-3">

</DIV>
H
headingwest 10/2/2017

Thanks Jerry, sound advice.