[Resolved] Simple but frustration css issue :)

[Author]

Posts

[stuart]

Radio buttons and Field title on the same line - see image... cant get them seperate

Any help if easy would be nice 🙂

Same access as this thread: https://toolset.com/forums/topic/toolset_get_related_post-on-page-with-toolsets-form-cred/

--CRED--
[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="wpcf-review">
<input type="radio" id="star5" name="wpcf-review" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="wpcf-review" value="4.5" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="wpcf-review" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="wpcf-review" value="3.5" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="wpcf-review" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="wpcf-review" value="2.5" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="wpcf-review" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="wpcf-review" value="1.5" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="wpcf-review" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="wpcf-review" value="0.5" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</div>
<div class="form-group ">
<label>Review Title</label>
[cred_field field='review-title' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Review Type</label>
[cred_field field='review-type' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Review Content</label>
[cred_field field='review-content' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Pros</label>
[cred_field field='pros' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Cons</label>
[cred_field field='cons' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Companies Reviews</label>
[cred_field field='@company-review.parent' class='form-control' output='bootstrap' select_text='--- not set ---' value='[wpv-post-id id="$current_page"]']
</div>
<div>
[cred_generic_field field='review-terms' type='checkbox' class='' urlparam='']
{
"required":1,
"validate_format":0,
"checked":0,
"default":"1",
"label":"Review Terms"
}
[/cred_generic_field]

[cred_show_group if="($(review-terms) eq '1' )" mode='fade-slide']
<p class="footnoate">You agree to the Review Policy Please check your email to publish the review </p>
<p>I confirm that my review and the information provided here accurately represents my personal experience as customer of this business.</p>
<p>Enter email address for review validation (Never public)[cred_field field='review-email' force_type='field' class='form-control' output='bootstrap'] </p>

[/cred_show_group]
</div>
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]

---CSS----
/****** Style Star Rating Widget *****/
.wpcf-review {
border: none;
float: left;
}

.wpcf-review > input { display: none; }
.wpcf-review > label:before {
margin: 5px;
font-size: 2.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}

.wpcf-review > .half:before {
content: "\f089";
position: absolute;
}

.wpcf-review > label {
color: #ddd;
float: right ;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.wpcf-review > input:checked ~ label, /* show gold star when clicked */
.wpcf-review:not(:checked) > label:hover, /* hover current star */
.wpcf-review:not(:checked) > label:hover ~ label { color: #f9e000; } /* hover previous stars in list */

.wpcf-review > input:checked + label:hover, /* hover current star when changing rating */
.wpcf-review > input:checked ~ label:hover,
.wpcf-review > label:hover ~ input:checked ~ label, /* lighten current selection */
.wpcf-review > input:checked ~ label:hover ~ label { color: #f9e000; }

[Christian Cox]

Since the stars are floated left, you should probably clear the next div:

<div class="form-group " style="clear:both;">
<label>Review Title</label>
[cred_field field='review-title' class='form-control' output='bootstrap']
</div>

[stuart]

You are a beautiful man and I love you.

Thanks... so simple 🙂