Adding non-centered text shifts centered elements

Question

After putting a centered header, I add a non-centered output with JS. After the output is produced, the header shifts a bit left. What can be done to tackle this problem?

let output = [];

function spit() {
  for (let i = 0; i < 100; i++) {
    output.push(i);
  }
  document.getElementById("output").innerHTML =
    output.join("<br>");
}

.header {
  background-color: lightgray;
  border: none;
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

<h2 id="dictName" class="header">
  Testing Page
</h2>

<button style="font-size:20pt;height:35pt" onclick="spit()">
         Press me!
</button>

<p id="output">
</p>

@RachelGallen Thanks for the editing! I haven't mastered snippets yet. — Eugene Barsky, Sep 05 '18 at 20:55
It looks like it is still being centered. It just shifts to the left because the scroll bar is added after the button is pressed. — MichaelvE, Sep 05 '18 at 20:56
@EugeneBarsky the snippet icon is to the right of the picture icon; you can enter your code here when you're composing your question - just for future reference :) — Rachel Gallen, Sep 05 '18 at 20:58
@RachelGallen Thanks, I'll try to use it, it's very convenient. — Eugene Barsky, Sep 05 '18 at 20:59
@MichaelvE Yes, I think that's the reason, but it looks ugly, so what can be done to avoid this behaviour? — Eugene Barsky, Sep 05 '18 at 21:01
IF you don't want the h1 to shift due to the scrollbar, you would have to calculate, using css calc() (and maybe some other things too), 50vw - (widthOfH1/2). This works because the vw unit (viewport width) is not affected by the scrollbar. — Kevin Lewis, Sep 05 '18 at 21:01

score 1 · Answer 1 · answered Sep 05 '18 at 21:08

One crazy solution might be to set you body height to the view port height, that way you start off with a scroll, avoiding the shift when the button gets pressed.

let output = [];

function spit() {
  for (let i = 0; i < 100; i++) {
    output.push(i);
  }
  document.getElementById("output").innerHTML =
    output.join("<br>");
}

body {
  min-height: 100vh;
}

.header {
  background-color: lightgray;
  border: none;
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

<h2 id="dictName" class="header">
  Testing Page
</h2>

<button style="font-size:20pt;height:35pt" onclick="spit()">
         Press me!
</button>

<p id="output">
</p>

Rachel Gallen · Answer 2 · 2018-09-05T21:21:24.480

I added a universal { margin:0; padding:0;} to your css code. The code did seem to be centered but I think the margin of -50 (that's being created by the auto margin ) is throwing off the look.

let output = [];

function spit() {
  for (let i = 0; i < 100; i++) {
    output.push(i);
  }
  document.getElementById("output").innerHTML =
    output.join("<br>");
}

* {
  margin: 0px; padding:0px;
}

button {
  /*margin-left:15px;*/
  margin-top:7px;
  font-size: 20pt;
  height: 35pt;
}

.header {
  background-color: lightgray;
 /* border: 15px solid white;*/ /*use the commented props if you still want the "indented" effect" */
  color: black;
  padding: 17px 25px;
  display: block;
  text-align: center;
  font-size: 36px;
  width: 100%;
  margin-right:auto;
  margin-left:auto;
}

<h2 id="dictName" class="header">
  Testing Page
</h2>

<button onclick="spit()">
         Press me!
</button>

<p id="output">
</p>

this does affect the padding on the header, but you could use border or outline as a solution to that e.g. border: 15px solid white; — Rachel Gallen, Sep 05 '18 at 21:13

score 0 · Answer 3 · answered Sep 05 '18 at 21:08

IF you don't want the h1 to shift due to the scrollbar, you would have to calculate, using css calc() (and maybe some other things too), 50vw - (widthOfH1/2). This works because the vw unit (viewport width) is not affected by the scrollbar.

One way for the scrollbar to not affect the centering of the h1 would be to use JQuery.

$(#dictName).style.marginLeft = 'calc(50vw -'+(this.width/2)+'px)';

I haven't tested this so I'm not 100% sure if it will work, but please tell me if it does or doesn't. You may need to rerun this code when the button is pressed.

Eugene Barsky · Answer 4 · 2018-09-05T21:20:42.500

0

After some googling it seems I found the easiest way to solve this problem here, on SO:

How to prevent scrollbar from repositioning web page?

html {
  overflow-y: scroll;
}

Probably, the question should be closed as duplicate, but I don't have enough reputation to do it.

edited Sep 05 '18 at 21:20

answered Sep 05 '18 at 21:13

Eugene Barsky

5,780
3
17
40

how would that solve the problem? the initial look would still be off, and the user would have to scroll over? – Rachel Gallen Sep 05 '18 at 21:24
@RachelGallen I've added these 3 lines to my code, and the header doesn't shift anymore. I'm a total newbie to html/css, so I can't explain, how it works, but my problem is solved. – Eugene Barsky Sep 05 '18 at 21:27
1

It creates a scrollbar though (so it pushes it over without shifting)...So the position would be still off? Still, if it works for you.. all good... – Rachel Gallen Sep 05 '18 at 21:30
@RachelGallen So is the solution with `* { margin: 0px; padding:0px;}` more correct in your opinion? – Eugene Barsky Sep 05 '18 at 21:37
That's what I would use, to prevent overflow. You can still get the indented effect on the header by adding a white border. But it's up to you. – Rachel Gallen Sep 05 '18 at 21:40

Adding non-centered text shifts centered elements

4 Answers4