why does my header collapse only on the appointments shortcoded page?

http://marisaporter.com/zimmermans/

the page where the header collapses

http://marisaporter.com/zimmermans/make-an-appointment/

the normal pages
http://marisaporter.com/zimmermans/auto-services/ and all the others

notice the hours and phone number area.

Very weird, cannot trouble shoot this. Only positive is that when I take the table out from the Schedule Repair page, the header returns to normal. I toggled this back and forth about 5 times.

You may have the best luck replicating this in chrome, but I noticed it in IE10, too. In IE10, however, a few refreshes would sometimes take care of the problem, but in chrome it is very consistently a problem.

Marisa

thanks.

  • kevin_m__schafer

    When using a shortcode there's not much you can do, the implementation of the script or table takes place -- regardless of the page. If you tweak the styling to make the appointment page display correctly, undoubtedly, your other pages will be wrong.

    Would you care to try another shortcode plugin? Here's one that I use and I have never had any trouble with it. Perhaps this will help you, or, maybe you're already using this one. http://wordpress.org/extend/plugins/shortcoder/

    Could you mention which plugin you are currently using?

    Thanks,
    Kevin

  • marisqa

    Hi.
    I guess the word collapse was misleading. I should have said squished.

    This is the appointments plugin. I'm not sure how the appointments + plugin is affecting the styling of the header - that's odd, isn't it?

    The shortcoder plugin looks intriguing, but how will it change things? It seems to be a plugin that you can "call" code by calling a shortcode that refers to html, or javascript. Kind of like calling a .php file in a template. How will that change the table. In other words, isn't the shortcode just going to call exactly the same code that is in it now? Can I send you an admin login so you can look at that page and where would I do that?

    Thanks

    Marisa.

  • Vaughan

    hi @marisqa

    thanks for posting, I see what you are referring to.

    here's the outputted html for the home page header part.

    <div id="header-search">
    <span class="rss">
    <div id="hours">
    <p></p>
    <div id="wpcf-field-phone-number" class="phone wpcf-field-phone wpcf-field-phone-number">
    <span class="phone wpcf-field-value wpcf-field-phone-value wpcf-field-phone-number-value">717.766.4441</span>
    </div>
    <br>
    <div id="wpcf-field-address" class="hours wpcf-field-textarea wpcf-field-address">
    <div class="hours wpcf-field-value wpcf-field-textarea-value wpcf-field-address-value">768 Centerville Rd | Newville, PA 17241</div>
    </div>
    <br>
    <div id="wpcf-field-hours" class="address wpcf-field-textarea wpcf-field-hours">
    <div class="address wpcf-field-value wpcf-field-textarea-value wpcf-field-hours-value">M-F 8-5, Sat-Sun Closed</div>
    </div>
    <p></p>
    </div>
    </span>
    <div class="search_main fix">
    <form class="searchform" action="http://marisaporter.com/zimmermans/" method="get">
    </div>
    </div>

    and here's the same html for the appointments page >

    <div id="header-search">
    <span class="rss">
    <div id="hours">
    <div id="wpcf-field-phone-number" class="phone wpcf-field-phone wpcf-field-phone-number">
    <span class="phone wpcf-field-value wpcf-field-phone-value wpcf-field-phone-number-value">717.766.4441</span>
    </div>
    <div id="wpcf-field-address" class="hours wpcf-field-textarea wpcf-field-address">
    <div class="hours wpcf-field-value wpcf-field-textarea-value wpcf-field-address-value">768 Centerville Rd | Newville, PA 17241</div>
    </div>
    <div id="wpcf-field-hours" class="address wpcf-field-textarea wpcf-field-hours">
    <div class="address wpcf-field-value wpcf-field-textarea-value wpcf-field-hours-value">M-F 8-5, Sat-Sun Closed</div>
    </div>
    </div>
    </span>
    <div class="search_main fix">
    <form class="searchform" action="http://marisaporter.com/zimmermans/" method="get">
    <input class="field s" type="text" onblur="if ( this.value == '' ) { this.value = 'Search...'; }" onfocus="if ( this.value == 'Search...' ) { this.value = ''; }" value="Search..." name="s">
    <input class="search-submit" type="image" alt="Submit" name="submit" src="http://marisaporter.com/zimmermans/wp-content/themes/currents/images/ico-search.png">
    </form>
    </div>
    </div>

    you see the difference?

    the added <p></p> &
    tags.

    that's the cause.

    now we need to know how they get there.

    how do you define the address itself? is it in the theme options or a widget area etc?

    hope this helps.

    thanks

  • kevin_m__schafer

    Hi Marisa,

    Due to the fact that I'm not staff, I will have to decline access to your site.

    I feel bad for you that you are having this trouble. I wasn't exactly sure what you have installed for an appointment spread. Now I see that you have the appointments plugin.

    I think we should wait for a staff member to help you with this problem.

    The plugin I showed you is designed for entering any and all scripts and whatnot. Up until lately, many codes and scripts could be placed in the page or post editor, simply by toggling to the HTML tab. Now it says Text and leaves us to fend for ourselves. For example: If you want a daily crossword puzzle on your site and you really like those on Boatload Puzzles, the script will not run in the default editor. Here is where the shortcode plugin comes in that I mentioned. You simply place the crossword script in to the shortcode editor and it produces a shortcode for you. Now you place that shortcode where you want in the editor and the puzzle appears perfectly.

    If the appointments plugin already produces its own shortcode, you had better stay with the implementation that the instructions offers.

    Could you try a "Full Width Content" template (right side of editor) to see if this helps? This would just be a test. Also, try removing the sidebar widget. Again, this is just a test to give the appointments plugin a chance to expand if it needs to do this.

    I used Chrome > Inspect element and removed the table nodes from your appointments page. The header did not expand. There may be a conflict with your theme.

    How does the shortcode work in a page as compared to a post? This would be a test, of course.

    You'll solve this, it just may take a little bit of investigating.

    Please post back.

    Best,
    Kevin

  • kevin_m__schafer

    Hi @marisqa,

    I think it's time to look at your theme for a possible solution. Is this a purchased theme or is it a free theme?

    A purchased theme typically comes with free support.

    The purchased plugins here on wpmudev are constructed with complete compatibility with the latest WordPress specifications. This means, for example, that the appointments plugin will work, for certain, with a WordPress default theme such as Twenty Twelve. It should certainly work with a wpmudev theme as well.

    If this is a free theme that you are using, you may have to search for different one that does not fall down when using the appointments plugin.

    I hope this helps. Please post back with any information or further questions.

    Best,
    Kevin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.