[Support request] shortcode not displaying on a page

[njwrigley]

Hi there,

I have a plugin which generates a shortcode which I then copy into the text editor of a WP page:
[property_search_form id=”default”]

It creates a set of search filters for CPT fields, although this is not relevant!

So in GP, this shortcode displays nothing at all.

If I switch to 2017 and the Beaver Builder theme (the two that I have to hand), they display the search dropdowns as expected.

Any ideas why this might be?

[njwrigley]

So the markup created by the shortcode is as follows. It’s in the page, but GP does not display it – any thoughts… class conflicts? Possibly the .clear in the <form>?:

<form name="ph_property_search" class="property-search-form property-search-form-default clear" action="http://property-hive.dev/search-results/" method="get" role="form">

    
        <div class="control control-minimum_price sales-only"><label for="minimum_price">Min Price</label><select 
                name="minimum_price" 
                id="minimum_price" 
                class=""
             ><option 
                    value="" 
                     selected='selected'
                >No preference</option><option 
                    value="100000" 
                    
                >£100,000</option><option 
                    value="150000" 
                    
                >£150,000</option><option 
                    value="200000" 
                    
                >£200,000</option><option 
                    value="250000" 
                    
                >£250,000</option><option 
                    value="300000" 
                    
                >£300,000</option><option 
                    value="500000" 
                    
                >£500,000</option><option 
                    value="750000" 
                    
                >£750,000</option><option 
                    value="1000000" 
                    
                >£1,000,000</option></select></div>
    
        <div class="control control-maximum_price sales-only"><label for="maximum_price">Max Price</label><select 
                name="maximum_price" 
                id="maximum_price" 
                class=""
             ><option 
                    value="" 
                     selected='selected'
                >No preference</option><option 
                    value="100000" 
                    
                >£100,000</option><option 
                    value="150000" 
                    
                >£150,000</option><option 
                    value="200000" 
                    
                >£200,000</option><option 
                    value="250000" 
                    
                >£250,000</option><option 
                    value="300000" 
                    
                >£300,000</option><option 
                    value="500000" 
                    
                >£500,000</option><option 
                    value="750000" 
                    
                >£750,000</option><option 
                    value="1000000" 
                    
                >£1,000,000</option></select></div>
    
        <div class="control control-property_type residential-only"><label for="property_type">Type</label><select 
                name="property_type" 
                id="property_type" 
                class=""
             ><option 
                    value="" 
                     selected='selected'
                >No preference</option><option 
                    value="18" 
                    
                >Bungalow</option><option 
                    value="19" 
                    
                >- Detached Bungalow</option><option 
                    value="20" 
                    
                >- Semi-Detached Bungalow</option><option 
                    value="21" 
                    
                >- Terraced Bungalow</option><option 
                    value="22" 
                    
                >Flat / Apartment</option><option 
                    value="24" 
                    
                >- Apartment</option><option 
                    value="28" 
                    
                >- Duplex</option><option 
                    value="23" 
                    
                >- Flat</option><option 
                    value="25" 
                    
                >- Maisonette</option><option 
                    value="27" 
                    
                >- Penthouse</option><option 
                    value="26" 
                    
                >- Studio</option><option 
                    value="29" 
                    
                >- Triplex</option><option 
                    value="9" 
                    
                >House</option><option 
                    value="17" 
                    
                >- Cottage</option><option 
                    value="10" 
                    
                >- Detached House</option><option 
                    value="13" 
                    
                >- End of Terrace House</option><option 
                    value="15" 
                    
                >- Link Detached House</option><option 
                    value="14" 
                    
                >- Mews</option><option 
                    value="11" 
                    
                >- Semi-Detached House</option><option 
                    value="12" 
                    
                >- Terraced House</option><option 
                    value="16" 
                    
                >- Town House</option><option 
                    value="30" 
                    
                >Other</option><option 
                    value="31" 
                    
                >- Commercial</option><option 
                    value="33" 
                    
                >- Garage</option><option 
                    value="32" 
                    
                >- Land</option></select></div>
    
        <div class="control control-minimum_bedrooms residential-only"><label for="minimum_bedrooms">Min Beds</label><select 
                name="minimum_bedrooms" 
                id="minimum_bedrooms" 
                class=""
             ><option 
                    value="" 
                     selected='selected'
                >No preference</option><option 
                    value="1" 
                    
                >1</option><option 
                    value="2" 
                    
                >2</option><option 
                    value="3" 
                    
                >3</option><option 
                    value="4" 
                    
                >4</option><option 
                    value="5" 
                    
                >5</option></select></div>
    
        <div class="control control-parking residential-only"><label for="parking">Parking</label><select 
                    name="parking" 
                    id="parking" 
                    class=""
                 ><option 
                        value="" 
                         selected='selected'
                    >No preference</option><option 
                        value="50" 
                        
                    >Carport</option><option 
                        value="48" 
                        
                    >Double Garage</option><option 
                        value="46" 
                        
                    >Driveway</option><option 
                        value="45" 
                        
                    >Off Road Parking</option><option 
                        value="44" 
                        
                    >On Road Parking</option><option 
                        value="47" 
                        
                    >Single Garage</option><option 
                        value="49" 
                        
                    >Triple Garage</option></select></div>
    
        <div class="control control-outside_space residential-only"><label for="outside_space">Outside Space</label><select 
                    name="outside_space" 
                    id="outside_space" 
                    class=""
                 ><option 
                        value="" 
                         selected='selected'
                    >No preference</option><option 
                        value="42" 
                        
                    >Balcony</option><option 
                        value="72" 
                        
                    >Over half an acre</option><option 
                        value="43" 
                        
                    >South Facing Garden</option></select></div>
    
        <input type="hidden" name="department" value="residential-sales">
    
    <input type="submit" value="Search">

</form>

[njwrigley]

added this to style.css in GP child theme – seems to fix, but is this a good solution?

form.property-search-form.property-search-form-default.clear {
	width:100%;
	height: 100%;
	visibility: visible;
}

[Tom]

GP has a .clear class meant for clearing floats that hides the element. The HTML being generated has that class, so GP is hiding the entire element.

Your CSS should be just fine 🙂

[Author]

Posts