Need to show new box that will push up and down on DOM elements?

HTML-CSS
1

My goal for this that clicking ‘More’ will cause a hidden box to appear above the parent-Button, and have its own margin above and below. Squeezing itself in. It sort of does that, but its bottom margin does not push the parent-button down. Instead, it pushes down on the height of the parent-button. I tried making the ‘More’ hidden box from SPAN to a P but no change. Tips?
Code after THIS LINK to Replit …

<button type="button" id="0" onclick="bgr(this.id); mor(this.id);abv(this.id);" aria-pressed="false" aria-expanded="false" aria-controls="toggletext">
<span class="floatr"><span id="mole1" class="moreless"></span></span>BELOW always shows <strong>01</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley...</span>
  <span id="toggletext_0">ABOVE to show</span>
    </button>

…and the some of the CSS:

.showabove {
  display:block;
  height:auto;
  line-height:1.2em;
  margin-bottom:2em;
  margin-top: 2.5em;
  visibility:visible;
  position: relative;
  top:-9.5em;
}
2

I’m not too sure what you’re going for visually, but replacing display: block with display:inline-block from .showabove produces a much more visually appealing result… Although I’m not sure if that’s what you’re looking for :smiley:

image

2 Likes
3

I temporarily changed .showabove to display:inline-block as suggested and had a modest improvement. But, this revealed box continues to influence the height of the parent element (button). It’s also creating an odd gap of one line in the text. Also, using nth-child to target and conceal the hide/show box kills the entire function.

4

A few tweaks, but the hide/show element has margins and line-height that should affect layout?
And still puzzled that the CSS is not concealing the hide/show element?

5

Ok, the parent-element box height problem is fixed. Other issues remain.

6

More tweaking…
Main problem at this point: The permanent elements (buttons) do not reflow when the hidden element goes from height 0em to 2em?

7

NOTE: The limited ability to influence reflow is baked into browsers. Now, if you want LESS reflow to stop “layout jank” on page load, that’s different. But in this case, I need for the page layout to allow existing elements to slide out of the way when I increase the height of a hidden element.
Not gonna happen except probably with JavaScript, according to the following article…
May have to ask to have this post moved out of HTML/CSS?

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.