Job types show bullet included on [jobs] filter form in some themes/browsers

[makske]

The formatting on my published page for the 'job type' is all funky. Is there a way to adjust the formatting of this? Picture below. TIA

Screenshots

Expected behavior
It should be even formatting -- there are random dots that are placed inconsistently with each type

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and confirmed this bug occurs when only WP Job Manager plugin is active.
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

WordPress Environment

• WordPress Version: 5.6
• WP Job Manager Version: 1.34.5
• PHP Version: 7.2.34
• Other important details:

[tripflex]

This is probably being caused by some other plugin or the theme you're using, as WP Job Manager specifically has CSS to hide the list item bullets, but it seems your theme or another plugin is overriding that causing them to show.

I guess we could make the CSS selector more specific @jom ?

WP-Job-Manager/assets/css/frontend.scss

Lines 564 to 565 in a0a7696

	.job_types {
	list-style: none outside;

If you can provide the URL to where we can see this i can tell you what is causing it.

[makske]

Hi! Thank you for responding. Here is the URL https://hbagbr.org/jobs/ From: Myles McNamara <notifications@github.com> Reply-To: Automattic/WP-Job-Manager <reply@reply.github.com> Date: Thursday, January 7, 2021 at 3:53 PM To: Automattic/WP-Job-Manager <WP-Job-Manager@noreply.github.com> Cc: Makinzie Sketch <makinzie@hbagbr.org>, Author <author@noreply.github.com> Subject: Re: [Automattic/WP-Job-Manager] Display Formatting Issue (#2096) This is probably being caused by some other plugin or the theme you're using, as WP Job Manager specifically has CSS to hide the list item bullets, but it seems your theme or another plugin is overriding that causing them to show. https://github.com/Automattic/WP-Job-Manager/blob/a0a769648572e54cc64ed6b95fc466334fb24be7/assets/css/frontend.scss#L564-L565 If you can provide the URL to where we can see this i can tell you what is causing it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#2096 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ASLJFPEEQKNCG5DZZP3MLALSYYUMRANCNFSM4VT3EOSQ>.

[tripflex]

Oh weird something appears to be setting ::marker before the elements, first i've seen this.

Add this CSS to your site which should fix it:

ul.job_types li::marker {
    content: "";
}

[makske]

I am very new LOL – where do I go in the backend editor to add the CSS? From: Myles McNamara <notifications@github.com> Reply-To: Automattic/WP-Job-Manager <reply@reply.github.com> Date: Thursday, January 7, 2021 at 4:09 PM To: Automattic/WP-Job-Manager <WP-Job-Manager@noreply.github.com> Cc: Makinzie Sketch <makinzie@hbagbr.org>, Author <author@noreply.github.com> Subject: Re: [Automattic/WP-Job-Manager] Display Formatting Issue (#2096) Oh weird something appears to be setting ::marker before the elements, first i've seen this. Add this CSS to your site which should fix it: ul.job_types li::marker { content: ""; } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#2096 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ASLJFPCCTB63QHXJAPZ3FSTSYYWJZANCNFSM4VT3EOSQ>.

[tripflex]

Add it to the style.css file in your child theme's directory, should be something like wp-content/themes/THEMENAME/style.css

You can also check the customizer you may be able to add custom CSS in there as well

[tripflex]

It looks like you're using a frontend builder as well, you can probably add it somewhere in that as well, your theme developer can help if you can't figure it out

[tripflex]

@jom i've been seeing this pop up every now and then, seems that we may need to add ::marker to the css as well to prevent any output of that (i can't really find much information on this though). it seems this is browser based, but not sure if it requires something from theme to "enable" it or not (honestly haven't done much research on it)

[makske]

Thank you @tripflex -- Anything helps! I tried to add the CSS you wrote above but nothing changed. I am working in Chrome but have also tried Safari. Let me know if there are any other solutions!