Any chance you can fix the display width of a relationship field when in a conditional group in forms ?
As per the image attached you can see that when not in a conditional group the display width works perfect by filling the full width.
But when in a conditional group it becomes to small to display the content properly.
Hello and thank you for contacting the Toolset support.
I run a small test locally and I was able to reproduce this issue. As the width for the select field is set on the frontend depending on the conditional group condition, we'll need to adjust its width with custom Javascript code. Try the following code in the form's Javascript section, check this screeshot hidden link :
jQuery(function($){
var interval = setInterval(function(){
var select = $('span.toolset_select2');
if ( select.css('width') == '100%' )
clearInterval(interval);
if ( select.css('width') == '100px' )
select.css('width', '100%');
}, 300);
});
I run the test locally on a relationship field, It uses select2 to allow users to search within the related posts.
To better assist with your form, I'll need to see a page where this form is used, and preferably, have access to the backend so I can test the code at the end. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
When adding a relationship field to a post form the display width works great (100%.)
When adding a relationship field to a post form in a wpv-conditional ... the display width works great (100%)
When adding a relationship field to a post form in a cred_show_group... the display width ends up to small. (not 100%)
SO THE PROBLEM is with cred_show_group
I did more checking and it appears to be within the mode settings
If i change the mode to none......make my selection to meet the condition .....I still have the problem....but if i hit a page refresh, I get the display width to 100%.
1 - I tried using inline forms on parts of this form with no luck ..... ended up just using grids.
2 - Created 2 select fields for measurement (feet & inches) ..... found out you can not use symbols (like ' or ") in the custom field content part but its fine in the display text part. I created the fields, but them in a form, then tested and found they do not save properly and do not display at all. There should be an early warning when creating the field that symbols are not allowed OR FIX it to allow symbols.
3 - The Post Title Field becomes NOT REQUIRED if put in a cred_show_group condition. ..... in other words you can create posts with no title (it just uses the ID instead). .... solved this by just putting the label under the condition.
4 - and finally my trouble with getting relationship fields to show 100% width, when in a cred_show_group condition. ...... First off, the code you provided above does work to solve the issue BUT only if the following adjustment to my form was done.
The post type for this form has 6 possible relationships that can be used, but only 3 are required, and thus the reason I am using conditions to select the correct relationships. One relationship is by itself (no condition required) and the other 5 are in 2 (3&2) separate conditions.
What I found (strange as it is) the order placement of these fields mattered. If the relationship not in a condition was placed before the ones in a condition, the relationship fields width in the conditions would NOT be at 100%. If I moved the non conditonal relationship field after the other two, my problem was solved.
Any thoughts, on what changes will be coming ?
New threads created by Jamal and linked to this one are listed below:
Thank you for this feedback. I actually just escalated the original issue to our 2nd Tier for more analysis before escalating to the developers.
I reproduced it on this installation hidden link
You can login using this URL hidden link
I hope I can get your collaboration to reproduce all these issues in this test installation:
- The case where you used wpv-conditional.
- The issue with symbols.
- The post title field inside a conditional.
- The issue with ordering relationship groups inside conditional groups.
As soon as you reproduce these issues, I'll review them and check if a workaround may be used. Then I'll escalate them to our 2nd Tier for a 2nd review before landing in the developers' queue.
I hope that's not too much to ask, and I'll remain at your disposal.
Test Form = Has Bugs
Test Form BF = Bug Free (my workarounds)
The only thing I noticed is that the public page works slightly different then the page I was testing with on that site (In regards to the 100% width).
Plus I was unable to make a post to test the symbols. The post from "Test Form" Should not be able to display feet or inches even if you selected a value. If you try to edit it it will default back to no value.
let me know if you found all the bugs and my workarounds.
Our 2nd Tier has analyzed the width issue of a relationship field inside a conditional group and provided another solution. The issue is that we use the Select2 library for the relationship field. The select2 library is setting the width for it. But, it is very complex for Javascript libraries to set a consistent width for elements that are initially hidden. hidden link
For this, our 2nd Tier suggested setting a width for the original <select> field before it is converted to a select2 field. This has to be done with Javascript, but can't be added to the JS section of the form, as this section will be executed after the field is converted to select2. So he suggested using <script> tag inside the form. Check these screenshot:
- Our 2nd Tier screenshot hidden link
- My screenshot: hidden link
[cred_show_group if="( $(post_title) ne '' )" mode="fade-slide"]
[cred_field field='@page-post.parent' class='form-control customwidth' output='bootstrap' select_text='--- not set ---']
[/cred_show_group]
<script type="text/javascript">
jQuery('select[name="@page-post.parent"]').attr('style', 'width: 100%');
</script>
Regarding the other points(title required, ordering relationships), I am not sure to fully understand what do you mean. Please elaborate a bit more and explain what would you expect and what you actually get.
Post Title
There should be 3 fields that are required on the test form (select post title, select relationship and page title)
If you satisfy the first two and forget to put a value for the page title, then submit the post. You will get a post with no title.
On that form you will see two title fields in different conditions. My workaround on test form BF , I moved the title field out of the condition and left the label in the condition. I was only looking for a different description on what to be put in the field but I still wanted the title field to be required.
Relationship widths issue in a different order
On my site I was able to resolve the width issue by using the first code you gave me along with rearranging the fields in a different order on the form.
It was not working the same on your test site. BUT I did have hints of it. I had a different display when loged in vs loged out. Plus if you where loged in on test form, you would get different widths if you selected relationship A vs B.
Comparing your test site to mine if I moved Page Parent after the Pages Relationships it resolved the issue on my site.
Relationship width issue
I have not had a chance to test the new code you have provided, but I was also wondering if the number of items to select from in the relationship fields could cause an issue, as per a previous issue I had with a select field on the back end. https://toolset.com/forums/topic/unable-to-see-redirect-post-types-selections-on-forms/
My site has thousands of relationships to choose from.
New threads created by Jamal and linked to this one are listed below:
Thank you for your feedback and my apologies for the late reply.
1. Post title: I am escalating this issue on a separate ticket to our 2nd Tier to get a second opinion. I'll be sharing a workaround on the ticket.
2. Relationship widths issue in a different order: I think that it is just the custom JS code that I have shared before that is doing this, once I removed it, we got back to the 100px width.
3. Relationship width issue: I don't think so, I have tested it with only a few posts and the issue appears. According to our developers, the width is calculated by select2 when the page is loaded. But the field is hidden by the conditional group and all JS libraries do present glitches when working with hidden fields. Our developers do not think this is a bug we should fix as long as we have a simple workaround.
