Исчезающие элементы смещаются и корректируются - PullRequest
Новая
       16

Исчезающие элементы смещаются и корректируются

0 голосов
/ 03 июля 2018

Я создал простой веб-сайт, на котором пользователь может вводить слово, и результат отображается в соответствующем div. Проблема в том, что некоторые из вновь созданных <p></p> и вставленных в DOM смещаются или динамически корректируются влево. Вы можете проверить результат здесь: https://icelandico.github.io/nato-alphabet-decoder/. Как избежать этого непривлекательного эффекта?

Вот часть кода, ответственная за этот эффект:

<div class="item result"> </div>

 .result,
 .full-codes-list {
     width: auto;
     white-space: nowrap;
     margin: 0 auto;
     text-align: center;
 }

.result p,
.full-codes-list tr {
    font-size: 1rem;
    letter-spacing: 5px;
    padding: 15px 0;
    color: #05386b;
    animation: fadeIn 1s;
    text-align: left;
}

@keyframes fadeIn {
    from { opacity: 0}
    to { opacity: 1}
}


  function putInDom() {
    let newParagraph = document.createElement('p');
    newParagraph.innerHTML = result[counter];
    resultDiv.appendChild(newParagraph);
    counter < result.length - 1 ? counter ++ : clearInterval(wordInsert)
 }

function decode() {
  inputValue = searchValue.value;
  inputValue = inputValue.toUpperCase().split("").filter(character => 
  character.match(/[\S]/));
  result = (inputValue.map(letter => letter in alphabet ? alphabet[letter] :
  letter));
}

Переменная alphabet - это объект, в котором хранится буква и связанный с ней код.

Ответы [ 3 ]

0 голосов
/ 03 июля 2018

Попробуйте этот CSS, CSS доступен в вашей таблице стилей. Я только что добавил text-align: center

.result p {
    font-size: 2rem;
    text-align: center;
}

OR 

.result, .full-codes-list {
    width: 300px;
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}
0 голосов
/ 03 июля 2018

Я думаю, что использование CSS Flexbox (подробности здесь ) сделало бы его абсолютно стабильным.

По сути, вам просто нужно добавить это к концу вашего существующего CSS: 

.result {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
    margin: 0;
}

.result p {
    flex: 1 100%;
    text-align: center;
}

Вот пример (значки не работают): 

const clearButton = document.querySelector('.menu--clear--button');
const searchButton = document.querySelector('.menu--search--button');
const searchValue = document.querySelector('.menu--value');
const resultDiv = document.querySelector('.result');
const fullCodeListTable = document.querySelector('.table-codes');
const contentDivs = Array.from(document.querySelectorAll('.content'));
const menuButtons = Array.from(document.querySelectorAll('.button'));
let inputValue;
let result;
let counter = 0;
let wordInsert;

// Input Buttons

clearButton.addEventListener('click', clearInput);
searchButton.addEventListener('click', function() {
  clearResult();
  decode();
  intervalAppend();
});

searchValue.addEventListener('keydown', function(event) {
  enterSearch(event.key)
});

// Menu Buttons

menuButtons.forEach(function(button) {
  button.addEventListener('click', function(e) {
    let clickedIndex = menuButtons.indexOf(e.target);
    clearResult();
    hideAndShowNextButton(e.target);
    clearDivs();
    showProperDiv(clickedIndex);
  })
});

function decode() {
  inputValue = searchValue.value;
  inputValue = inputValue.toUpperCase().split("").filter(character => character.match(/[\S]/));
  result = (inputValue.map(letter => letter in alphabet ? alphabet[letter] : letter));
}

function putInDom() {
  let newParagraph = document.createElement('p');
  newParagraph.innerHTML = result[counter];
  resultDiv.appendChild(newParagraph);
  counter < result.length - 1 ? counter ++ : clearInterval(wordInsert)
}

function clearInput() {
  searchValue.value = '';
}

function enterSearch(event) {
  if (event === 'Enter') {
    clearResult();
    decode();
    intervalAppend();
  }
}

function intervalAppend() {
  wordInsert = setInterval(putInDom, 500)
}

function clearResult() {
  counter = 0;
  resultDiv.innerHTML = '';
  result = [];
}

function generateList() {
  clearContent();
  let newTableRowHeader = document.createElement('tr');
  let newTableHeader1 = document.createElement('th');
  let newTableHeader2 = document.createElement('th');
  newTableHeader1.innerHTML = 'Symbol';
  newTableHeader2.innerHTML = 'Code';
  newTableRowHeader.appendChild(newTableHeader1);
  newTableRowHeader.appendChild(newTableHeader2);
  fullCodeListTable.appendChild(newTableRowHeader);
  for (key in alphabet) {
    let newCodeRow = document.createElement('tr');
    let newRowDataChar = document.createElement('td');
    let newRowDataCode = document.createElement('td');
    newRowDataChar.innerHTML = key;
    newRowDataCode.innerHTML = alphabet[key];
    newCodeRow.appendChild(newRowDataChar);
    newCodeRow.appendChild(newRowDataCode);
    fullCodeListTable.appendChild(newCodeRow)
  }
}

function clearContent() {
  while (fullCodeListTable.firstChild) {
    fullCodeListTable.removeChild(fullCodeListTable.firstChild);
  }
}

function hideAndShowNextButton(element) {
  menuButtons.forEach(function(button) {
    if (button.classList.contains('hidden')) {
      button.classList.remove('hidden')
    }
    element.classList.add('hidden');
  })
}

function clearDivs() {
  contentDivs.forEach(function(div) {
    div.classList.add('hidden')
  })
}

function showProperDiv(index) {
  contentDivs[index].classList.remove('hidden')
}

const alphabet = {
  "A": "Alfa",
  "B": "Bravo",
  "C": "Charlie",
  "D": "Delta",
  "E": "Echo",
  "F": "Foxtrot",
  "G": "Golf",
  "H": "Hotel",
  "I": "India",
  "J": "Juliett",
  "K": "Kilo",
  "L": "Lima",
  "M": "Mike",
  "N": "November",
  "O": "Oscar",
  "P": "Papa",
  "Q": "Quebec",
  "R": "Romeo",
  "S": "Sierra",
  "T": "Tango",
  "U": "Uniform",
  "V": "Victor",
  "W": "Whiskey",
  "X": "Xray",
  "Y": "Yankee",
  "Z": "Zulu",
  1: "One",
  2: "Two",
  3: "Three",
  4: "Four (Fower)",
  5: "Five",
  6: "Six",
  7: "Seven",
  8: "Eight",
  9: "Nine (Niner)",
  0: "Zero"
};

generateList();
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
    font-family: "Swis721 LtEx BT", sans-serif;
}

html {
    height: 100vh;
}

body {
    min-height: 100vh;
    background: #5cdb95;
    color: #05386b;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    letter-spacing: 10px;
    overflow: auto;
    line-height: unset;
}

.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.top-banner {
    margin: 1% auto;
    text-align: center;
    font-size: 2rem;
    font-family: "Swis721 LtEx BT", sans-serif;
}

.menu {
    min-height: 125px;
    background: #379683;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu--buttons {
    margin: 2% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 75%;
}

.button {
    display: inline-block;
    height: 50px;
    width: 75%;
    text-align: center;
    border-radius: 5px;
    border: none;
    margin: 1%;
    background: #05386b;
    color: #ecf0f1;
    letter-spacing: 5px; ;
    font-size: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden {
    display: none;
}

.menu-searchbar:focus {
    outline: 0;
}

.input {
    margin: 0;
    float: left;
    display: inline-block;
    height: 25px;
    background: #379683;
    color: #ecf0f1;
    border: 3px solid #05386b;
    border-left: 0;
    padding: 20px;
    position: relative;
}

.about {
    text-align: center;
    margin: 5%;
}

.about p {
    display: inline;
    letter-spacing: normal;
    font-size: 2rem;
}

.about a {
    text-decoration: none;
    font-weight: 500;
    color: #379683;
}

.menu--value {
    text-transform: uppercase;
    border-left: 3px solid #05386b;
    background: #5cdb95;
    color: #05386b;
    font-weight: 500;
}

::-webkit-input-placeholder {
    color: #05386b;
}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

button:focus, input:focus {
    outline: 0;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #5cdb95 inset;
}

.active-content {
    margin: 2% auto;
}

.result,
.full-codes-list {
    width: auto;
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}

.result {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
    margin: 0;
}

.result p,
.full-codes-list tr {
    font-size: 1rem;
    letter-spacing: 5px;
    padding: 15px 0;
    color: #05386b;
    animation: fadeIn 1s;
    text-align: left;
}

.result p {
    flex: 1 100%;
    text-align: center;
}

td:first-child {
    text-align: center;
    padding:1%;
}

th {
    padding: 2% 0;
    font-weight: 700;
    letter-spacing: normal;
}

tr:nth-child(2n) {
    background: #379683;
}

th:first-child {
    padding: 0 15px;
}

.result p {
    font-size: 2rem;
}

@keyframes fadeIn {
    from { opacity: 0}
    to { opacity: 1}
}

.result p:first-letter {
    font-weight: 900;
    color: #05386b;
}

.footer {
    position: relative;
    bottom: 0;
    background: #379683;
    width: 100%;
    padding: 15px;
}

.footer-item {
    width: 50%;
}

.footer-header {
    color: #05386b;
    font-size: 8px;
    font-weight: 700;
    float: left;
    line-height: 2rem;
    letter-spacing: 2px;
}

.footer-icons {
    float: right;
    font-size: 1rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.footer-icon {
    float: right;
    display: inline-block;
    color: #05386b;
    width: 15%;
}

a span:hover {
    transform: scale(1.3);
}

@media screen and (min-width: 968px) {
    .button {
        max-width: 35%;
    }
}

@media screen and (max-width: 320px) {
    .footer-header {
        font-size: 12px;
    }
}
<body data-gr-c-s-loaded="true" style="">
<div class="wrapper">
  <div class="item top-banner">
    <h1>Nato Phonetic Alphabet</h1>
  </div>
  <div class="item menu">
    <div class="menu--buttons">
      <button type="button" class="button button--search-bar hidden">Search</button>

      <button type="button" class="button button--full-list">Full codes list</button>

      <button type="button" class="button button--about">About</button>
    </div>
  </div>
  <div class="active-content">
    <div class="content item menu-searchbar">
        <input class="input menu--value" type="text" placeholder="Type Your word" name="name" required="">

        <button class="input menu--search--button" type="button"><span class="icon fas fa-search"></span></button>

        <button class="input menu--clear--button" type="button"><span class="icon fas fa-backspace"></span></button>
    </div>
    <div class="content full-codes-list hidden">
      <table class="table-codes"><tr><th>Symbol</th><th>Code</th></tr><tr><td>0</td><td>Zero</td></tr><tr><td>1</td><td>One</td></tr><tr><td>2</td><td>Two</td></tr><tr><td>3</td><td>Three</td></tr><tr><td>4</td><td>Four (Fower)</td></tr><tr><td>5</td><td>Five</td></tr><tr><td>6</td><td>Six</td></tr><tr><td>7</td><td>Seven</td></tr><tr><td>8</td><td>Eight</td></tr><tr><td>9</td><td>Nine (Niner)</td></tr><tr><td>A</td><td>Alfa</td></tr><tr><td>B</td><td>Bravo</td></tr><tr><td>C</td><td>Charlie</td></tr><tr><td>D</td><td>Delta</td></tr><tr><td>E</td><td>Echo</td></tr><tr><td>F</td><td>Foxtrot</td></tr><tr><td>G</td><td>Golf</td></tr><tr><td>H</td><td>Hotel</td></tr><tr><td>I</td><td>India</td></tr><tr><td>J</td><td>Juliett</td></tr><tr><td>K</td><td>Kilo</td></tr><tr><td>L</td><td>Lima</td></tr><tr><td>M</td><td>Mike</td></tr><tr><td>N</td><td>November</td></tr><tr><td>O</td><td>Oscar</td></tr><tr><td>P</td><td>Papa</td></tr><tr><td>Q</td><td>Quebec</td></tr><tr><td>R</td><td>Romeo</td></tr><tr><td>S</td><td>Sierra</td></tr><tr><td>T</td><td>Tango</td></tr><tr><td>U</td><td>Uniform</td></tr><tr><td>V</td><td>Victor</td></tr><tr><td>W</td><td>Whiskey</td></tr><tr><td>X</td><td>Xray</td></tr><tr><td>Y</td><td>Yankee</td></tr><tr><td>Z</td><td>Zulu</td></tr></table>
    </div>
    <div class="content about hidden">
    <p>
      For more information about NATO Phonetic Alphabet visist this
      <a href="https://www.osric.com/chris/phonetic.html" target="_blank">site</a>
    </p>
    </div>
  </div>
  
  <div class="item result"></div>
</div>
<footer class="footer">
  <div class="footer-item footer-header">By Michal M.</div>
  <div class="footer-item footer-icons">
    <a class="footer-icon" href="https://twitter.com/cartohistory" target="_blank"><span class="fab fa-twitter"></span></a>
    <a class="footer-icon" href="https://linkedin.com/in/micha%C5%82-muszy%C5%84ski-819352118" target="_blank"><span class="fab fa-linkedin"></span></a>
    <a class="footer-icon" href="https://icelandico.carbonmade.com/" target="_blank"><span class="far fa-map"></span></a>
    <a class="footer-icon" href="https://github.com/icelandico" target="_blank"><span class="fab fa-github-square"></span></a>
    
    <address><a class="footer-icon" href="mailto:michal.muszynski@pm.me" target="_blank"><span class="far fa-envelope"></span></a></address>
  </div>
</footer>
</body>
0 голосов
/ 03 июля 2018

Хорошо, я понял, что это только в том случае, если сначала появляется короткое слово, а затем длиннее. Зачем? Хорошо, потому что это создание div с наименьшим словом в ширину этого слова. Затем приходит более длинное слово и ширина увеличивается. Так что первое слово немного смещается влево. Когда вы делаете это наоборот: сначала длинное слово, а не короткое, оно не сдвигается.

Так что, возможно, это поможет установить определенную ширину, например, 10%;

Посмотрите, работает ли это.

...