Member Avatar for cgull

Hello,

Using codeigniter 2.1.2 and Bootstrap 2.3.1.

I have just uploaded files from a local site to a live server.

Somehow a div inside an accordion div gets different heights:

On my local site I have this div:
<div id="ui-accordion-1-panel-0" class="row ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="padding: 0.5em 0px; display: block; height: 529.2px;" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">

On the live site the same div had a different height:
<div id="ui-accordion-1-panel-0" class="row ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="padding: 0.5em 0px; display: block; height: 279.2px;" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">

My code:

 <div class="accordion">
        <?php foreach($provinces as $province): ?>
        <h3><?php echo $province->name; ?></h3>

        <div class="row" style="padding: .5em 0;">//This is the div that gets different heights

How can that happen?

  • 4 Contributors
  • 9 Replies
  • 286 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cgull

Dani AI

Generated

Good catch by — the differing heights turned out to be caused by server-side output (a PHP warning) being printed into the accordion content on the development server while the live server suppressed it. That extra text/whitespace became part of the panel’s content and changed the browser’s computed height. Forcing a fixed height (as suggested) only hid the symptom; the real fix is to remove the unexpected output.

Quick, high-value diagnostics to run when rendered size differs between environments: 1) inspect the panel’s DOM in devtools and look for unexpected text nodes or stray elements; 2) view the raw page source and search for “Warning”, “Notice” or visible stray characters; 3) align error-display settings between environments temporarily so they behave the same and reveal the cause; 4) check for BOMs or whitespace outside PHP tags in included files; 5) compare server PHP versions and included asset files (CSS/JS) to rule out resource mismatches.

Recommended fixes and best practices: suppress error output in production and enable error logging instead, then fix the underlying notices/warnings in development; avoid leaving debug echoes or stray closing PHP tags that produce output; keep dev and prod configurations similar except for display vs logging of errors; avoid relying on JS-set inline heights as a permanent solution — fix the content source instead.

Simple checks to spot invisible text nodes (run in the browser console, using a selector for the accordion panel):

var panel = document.querySelector('.your-accordion-panel-selector');
console.log(Array.from(panel.childNodes).filter(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim()));

Setting an explicit height can be a useful temporary test, but addressing the root cause (server output) prevents future layout surprises. Thanks also to and for their troubleshooting prompts.

Recommended Answers

All 9 Replies

Member Avatar for Octet

Strange, no reason why I can see this would happen...

My only suggestion would be to define the DIV heights specifically and see how this goes?

Member Avatar for RvSon

Are you Displying both outputs in same browser?

Member Avatar for cgull

Yes, browsing local and live on the same browser, Firefox.

Yes, added height to the div style like so:
<div style="height: 400px;">

Live changed to 400px, local stayed the same.

How strange is that?

And the funny thing, for once, things are working as I want on the live server.... but still... lol

Edited by cgull
Member Avatar for cgull

Tried to add: <div style="max-height: 300px"> that helped on the local site, but of course, I don't want to add this rule, it was just for testing.

Maybe I should also add, that this div has also the Bootstrap row class added to it. Don't know if it matters in this case.

Member Avatar for RvSon

Try with Inline style to set the style of div ?

Member Avatar for cgull

FOUND IT !!!!!

Oh dear, I have a php warning that was not shown on the live server but is shown on the dev server.

But this warning appears only on some of the accordion tabs so I didn't see it on the dev server as well until I moved to a different tab.

That's what created the extra space and made the div look higher....

OHHHHHHHHHHHHHHHH

:)

Member Avatar for Octet

Glad you solved the problem.

Don't forget to mark the thread as completed and good luck with your developing!

Member Avatar for JorgeM

I have a php warning that was not shown on the live server but is shown on the dev server.

Any information that you can provide with regard to the known issue and how you actually solved it would be helpful for others that come across this thread with a similiar issue.

Member Avatar for cgull

Any information that you can provide with regard to the known issue and how you actually solved it would be helpful for others that come across this thread with a similiar issue.

I think the information is in the post?

Dev server was set up to display php errors and live server was set up to not display php errors.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.