Skip Navigation

[Résolu] Simple but frustration css issue :)

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem: I need the text to display on another line, but it displays next to the images.

Solution: Since the images are float:left, you should clear those floats.

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

Relevant Documentation:
https://css-tricks.com/all-about-floats/

This support ticket is created Il y a 5 années et 8 mois. 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.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

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)

Marqué : 

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par stuart Il y a 5 années et 8 mois.

Assisté par: Christian Cox.

Auteur
Publications
#1221701
fields-same-line.jpg

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; }

#1221779

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>
#1222326

You are a beautiful man and I love you.

Thanks... so simple 🙂