Missing selection from combo box

This thread is resolved. Here is a description of the problem and solution.

Problem: I have an edit post form displayed on a page with several post relationship forms. In the edit post form I have a parent select field. I cannot see the selected parent post name, it seems to be hidden by CSS.

Solution: In this case it appears that custom code was added to one or more of the relationship forms to hide the selected parent post. This custom code is also causing the selected parent post to disappear from the post edit form. You must scope the custom CSS code in the relationship form to only target the relationship form selectors, since this CSS will also be included on the page with the edit post form.

This support ticket is created 4 years, 3 months ago. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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)

Tagged: Toolset Forms

This topic contains 6 replies, has 2 voices.

Last updated by tims-9 4 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

August 11, 2020 at 1:19 am #1733761

tims-9

I am trying to:
display the selected relationship from a combo box. Relationships do not appear as selected
Link to a page where the issue can be seen:

I expected to see:
the post title of the related CPT
Instead, I got:
blank selection.The form submits OK.
I thought it sounds like a CSS issue.
i tried the default WP theme and have the same issue.
i tried changing the background from white.

.toolset_select2-selection--single {
    background-color:#000!important;
}

this works but there is still no text visible.
i removed the CSS and the input goes back to the attached image.
when highlighting the combo box in developer mode, i can see that it has the correct data

August 11, 2020 at 5:22 pm #1734997

Christian Cox

Hi, where can I see the problem on your site? Please provide a URL in your next reply and I will take a closer look. Thanks!

August 12, 2020 at 1:10 am #1735293

tims-9

hidden link

August 12, 2020 at 3:11 pm #1736149

Christian Cox

When I go to that URL there is a JavaScript error thrown by datatables:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at Ha (jquery.dataTables.min.js:24)
    at O (jquery.dataTables.min.js:16)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:17)
    at jquery.js?ver=1.12.4-wp:2
    at Function.map (jquery.js?ver=1.12.4-wp:2)
    at n.fn.init.map (jquery.js?ver=1.12.4-wp:2)
    at na (jquery.dataTables.min.js:16)
    at e (jquery.dataTables.min.js:92)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
    at Function.each (jquery.js?ver=1.12.4-wp:2)

I'm not going to be able to debug with this error present. Can you resolve this error, or point me to a different example that doesn't have any JavaScript errors on the page?

August 13, 2020 at 2:48 am #1736771

tims-9

try again

August 13, 2020 at 6:40 pm #1737839

Christian Cox

Okay it looks like some custom CSS was added to at least two Post Relationship Forms shown on this page. Here are the two Relationship Forms:
hidden link
hidden link

The added CSS:

.toolset_select2-selection__rendered {
  display: none;
}

...and also...

.toolset_select2-selection__rendered {
  display: none!important;
}

Since these Relationship Forms are included in the same page as the main post editing Form, this CSS is injected into the same page. We use the select2.js library to show these relationship field inputs in both Forms, so there are several identical CSS classnames in the output generated by the two Forms. The custom CSS code in these Relationship Forms targets one of those reused classnames, so it not only hides the selected field text in the Relationship Form, it also hides the field in the main post editing form. There are at least two instances where you'll need to scope your custom CSS code using different ancestor selectors to limit the application of that code to one specific form. I would add a unique CSS classname to the Post Relationship Form cell in the Edit Contracts Layout, then scope your display:none CSS selectors with those ancestor classnames per cell. Make sense? Let me know if you have questions about that.

August 17, 2020 at 12:40 am #1741351

tims-9

Thankyou for pointing me in the right direction.
My issue is resolved now. Thank you!