I have a CRED Form with a relation ship select field.
I am showing this form in a Bootstrap4 modal to the user in the frontend:
hidden link
(click on the 'edit' button on the right top corner)
The second row of the form shows the 'Add client' relationship select field.
When I click in the search box to look for more clients, the box stays inactive.
When I use the same CRED form on a simple page, the search box works.
What can I do?
Thanks a lot for your help!
Tobi
Hi, please add this script to your Form's JS panel:
jQuery(document).ready(function(){
jQuery.fn.modal.Constructor.prototype._enforceFocus = function() {};
});
Let me know if that doesn't solve the problem and I can take a closer look.
Hey Christian, nice job! Your code works! There is still something weird going on though since the field is very narrow as opposed to when I look at it outside of the bootstrap modal (please check image in the attachment). Do you have another fix for that? 🙂 Thanks a lot for the great help! Tobi
You could try adding some custom CSS to set the width of the select2 element:
span.toolset_select2.toolset_select2-container.toolset_select2-container--default {
width: 100% !important;
}
Thx Chris, this works great. Can you tell me, where I can find CSS information for the form elements and the likes for next time, so I don't have to bother you with similar questions again? 🙂
Is there maybe a documentation of all the css handles of toolset elements?
Thx a lot!
Tobias
Can you tell me, where I can find CSS information for the form elements and the likes for next time, so I don't have to bother you with similar questions again?
There's not much in the way of a CSS reference or style guide for Toolset's generated markup. I find the browser inspector tool to be more valuable than any documentation though, since it's immediately available and never outdated. If you're using any of the Bootstrap features, then you can find all their documentation available here:
BS 4.4.1: https://getbootstrap.com/
BS 3.4.1: https://getbootstrap.com/docs/3.4/
Anyway, i's not really possible to predict the necessary overrides for every case because themes and plugins each include their own styles, which may or may not conflict with Toolset. The overrides are variable, based on those factors. I typically use the browser inspector tools to isolate the conflicting styles and override selector clashes with CSS specificity: https://dev.to/emmabostian/css-specificity-1kca
Ah perfect answer, Chris, thank you for taking the time of explaining me your process and the tipp with the CSS specificity, that's exactly the ressource, that I was looking for to make things more easy for me to understand, thx a lot. My issue is resolved now. Thank you!
