Skip Navigation

[Resolved] Using a View List and Cred Form want the view and edit form to line up in row

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a Form that includes a checkbox and a submit button. I would like to show both items in one horizontal row.

Solution: Use CSS to float the items and add a bit of padding between them.

.js-wpt-field-items.js-wpt-repetitive.wpt-repetitive {
    float: left;
    padding-right: 12px;
}
.btn.wpt-form-submit {
  float: left;
}
This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 3 replies, has 2 voices.

Last updated by mikeB-14 5 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1224116
view and edit lineup.JPG

InThe left hand is a view and the right hand is a cred edit form.
I want the submit and attended checkbox to be on the same line as the rest of the row.

View is this :-

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
[wpv-post-body view_template="loop-item-in-repeatable-field-view-test-showing-planner-and-repeat-fields"]

</tr>
</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

<td>[types field="delegate-grp-first-name"][/types]</td>
<td>[types field="delegate-grp-last-name"][/types]</td>
<td>[types field="delegate-grp-email"][/types]</td>
<td>[types field="delegate-grp-attended"][/types] [cred_form form='edit-delegates']</td>

______________________

Cred From edit is this :-

[credform]
[cred_field field='form_messages' class='alert alert-warning']

<div class="row">
<div class="col-sm-6">
<div class="form-group ">
[cred_field field='delegate-grp-attended' force_type='field' class='form-control' output='bootstrap']
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-sm']
</div>

<div class="form-group col-sm-6 hidden ">
<label>Planner Event</label>
[cred_field field='@delegates-collection.parent' class='form-control' output='bootstrap' select_text='--- not set ---']
</div>

[/credform]

Thanks
Tony

#1224172

It depends on several factors, so I would need to see this in the browser. Please provide a URL and login credentials.

#1224617

This CSS will help at larger screen resolutions:

.js-wpt-field-items.js-wpt-repetitive.wpt-repetitive {
    float: left;
    padding-right: 12px;
}
.btn.wpt-form-submit {
  float: left;
}
#1224631

My issue is resolved now. Thank you!