[Résolu] replace radio button with image to select and prevent overlap on creen resize

[Auteur]

Publications

[davidZ-4]

Tell us what you are trying to do? replace radio buttons with image and prevent image overlap when resizing the screen or using a mobile device

Is there any documentation that you are following? https://toolset.com/documentation/user-guides/styling-cred-forms/#set-of-radio-buttons

Is there a similar example that we can see? lien caché

What is the link to your site?
see the issue on this page lien caché

Please advise,
Thanks,

David

[Christian Cox]

This looks like a very specialized customization of the radio button form element and label, including animations and hover effects. This level of customization constitutes custom UI work, and unfortunately falls outside the scope of support we provide here in the forums. Please refer to our support policy here for more information about this: https://toolset.com/toolset-support-policy/

[davidZ-4]

Hi Christian,

Thanks for your reply.
I understand this.
I just need an example on how to use/call the "wpt-form-item-radio" class and I will take it from there.
i see the page https://toolset.com/documentation/user-guides/styling-cred-forms that I can use "input[name="NAME_OF_INPUT"]" for input field. can I use a similar concept to the radio button class?

Can you point me to something a bit more corroborative on the "wpt-form-item-radio" class and how to use it in my CSS?

Thanks,

David

[Christian Cox]

It depends on what you're trying to do. Here's how you can hide the radios using display none:

.cred-form input[type="radio"].radio {
    display: none;
}

That will hide the radio buttons, but the selector might not be specific enough for other styles. You'll have to determine the proper specificity using the browser inspector, because there is no additional documentation about overriding these styles.
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

[davidZ-4]

Thanks Christian,

If i recall i tried this and it actually hide the image as well.

i have the solution on how to make the li items in the ul responsive and i just need to know where i declare it in my css and how the CRED form can load my custom css to the respective ul and li tags

Any thoughts?
David

[davidZ-4]

I have one class for the UL and a couple of class to the li i need to load...

[davidZ-4]

a small correction.
yes:

.cred-form input[type="radio"].radio {
    display: none;
}

remove only the radio button but not the image., great.

still need help on how to loac the ul and li custom css to the page for this specific radio button group

thanks,

David

[Christian Cox]

You can add any markup to your CRED form. Then you can add those selectors into your selector chain to target only these input fields:

...
<div class="just-these-input-fields">
  [cred_field name="your-radio-field"]
</div>
...

.cred-form .just-these-input-fields input[type="radio"].radio {
    display: none;
}

[davidZ-4]

Thanks Chrisitan,

that was a good example and it works.

now i still need to apply a couple of custom css to the

and the

• I have the CRED radio button call the following CSS

  [cred_field field='bike-type' post='rider-profile' value='' urlparam='' class='container flex item flex-item' output='bootstrap']
  

  and in my CSS I have

  /* Set ul to have a 'container' class */
  .wpt-form-set-radios-wpcf-bike-type .container {
    list-style:none;
    margin: 0;
    padding: 0;
  }
  
  /* Set ul to have 'flex' class */
  .wpt-form-set-radios-wpcf-bike-type .flex {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
  }
  
  /* Set il with 'item' class */
  .wpt-form-item-radio .item {
    padding: 5px;
    width: 200px;
    height: 150px;
    margin: 10px;
    line-height: 150px;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }
  
  /* Set il to have 'flex-item' class */
  .wpt-form-item-radio .flex-item {
  }
  

  I also tried to add 'input[type="radio"].radio" to each class decleration but it didnt work.

  so i try to apply the 'container' and 'flex' to the ul tag
  and the "item" and 'flex-item' to the il tag.

  any thoughts?
  Thanks,

  David

[Christian Cox]

.wpt-form-set-radios-wpcf-bike-type .container

This selector uses the class "container", but Toolset Forms does not give you the ability to add a CSS class to the ul item, or to any li item in the radio group. You must use the classes that are already added to the form elements by default, or use JavaScript to manipulate the classes manually. See the attached screenshot. You have these classes to work with:

.wpt-form-set-radios-wpcf-bike-type - this is the ul
.radio-road-bike - this is the first li
.radio-mountain-bikes - this is the second li
.radio-city-urban-bikes - this is the third li

More references:
https://css-tricks.com/how-css-selectors-work/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

[davidZ-4]

Thanks Christian,

The problem i have is that i need to set a couple of additional styles for the ul and the li tags.
see the example here lien caché
I'm trying to implement the Flexbox solution.
as you can see the ul is set with the selectors container and flex
<ul class="container flex">
and the li is set with the selectors item and flex-item
<li class="item flex-item">1

the problem is that i need to combine the two selectors into one and i'm not sure how this is done.

any advice,
thanks,

David

[davidZ-4]

I also, looked at using JavaScript to manipulate the classes and found a few solution. but all of them are using getElementById.
i don't see an id to the ul nor to the li so i'm not sure how to add the classes to the elements as i don't have element id.

do you know of a method to check if class = "my class" then add desired classes to the element?

Thanks,

David

[Christian Cox]

You can use basic jQuery to select an item by class, or by a child selector of that class. For example, let's say you wrap the field in a div with the class 'only-this-select-field', and you want to target the top-level ul or its li children:

jQuery('.only-this-select-field > ul').addClass('some-custom-ul-class');
jQuery('.only-this-select-field > ul > li').addClass('some-custom-li-class');

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
http://api.jquery.com/child-selector/

[davidZ-4]

Thanks christian,
the jQuery did the trick.
glad this is solved.

Thanks,

David