Панель закладок Firefox изменяет адаптивный дизайн сетки CSS - PullRequest
Новая
       17

Панель закладок Firefox изменяет адаптивный дизайн сетки CSS

0 голосов
/ 20 декабря 2018

РЕДАКТИРОВАТЬ: я разместил ответ на этот вопрос ниже.

В моем проекте используется компоновка CSS-таблицы 20 на 20 столбцов (5% экрана для каждой ячейки).На одной из страниц есть строки текста по центру над полями ввода электронной почты и пароля, а также поля ввода по центру.Вся область содержит ячейки сетки css 8-14 и строки сетки 6-19, а центрирование выполняется с помощью padding-left.

Моя проблема заключается в том, что если я открою закладки Firefox, всплывающая панель закладокзаставляет линии над полями электронной почты и пароля смещаться вправо, а не по центру над полями электронной почты и пароля - другими словами, это не реагирует на отображение панели закладок.(Я использую Firefox 64, но то же самое происходит в более ранних версиях FF).

Соответствующий код CSS: 

.mktg_text {
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 13pt;
  color: rgb(175, 222, 162);
  line-height: 1.5;
}

.EMail_Pwd {
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 14pt;
}

Соответствующий код HTML: 

<div class="mktg_text" style="padding-left: 5%">Thirty three characters of  text go h<br></div>
<div class="mktg_text" style="padding-left: 0%; color: rgb(175,222,162);">  Forty-one characters of text go here Forty</div>
<div class="mktg_text" style="padding-left: 8%"><span style="color: rgb (175,222,162);">Thirty characters of text go h</span></div>
<div class="mktg_text" style="padding-left: 16.5%">Sixteen characte</div>   <br><br><br><br>

<form name='myform' id='myform'>

  <div class="EMail_Pwd">
    <input type="text" class="signup_join" autofocus placeholder="Your  email address" id="email_field" name="email_field" style="width:55%;"   required>
  </div>

  <div class="EMail_Pwd">
    <input type="password" onfocus="OnFocusFn(1)" placeholder="Your password 8 characters minimum" class="signup_join" minlength="8" id="passwd" name="passwd" style="width:55%;" required></div>

</form>

<button class="btn_joinnow" id="btn_joinnow" style="margin-left: 12%; color:rgb(255,255,255)" onfocus="OnFocusFn(2)" onclick="ProcessJoinForm(1)">Join Seventy Now  </button>

<br><br><br>

<div class="agree_02" style="padding-left: 6%;">By joining you agree to our</div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowTermsOfSvc()">Terms of Use</a></div><br>

<div class="agree_02" style="padding-left: 9%">Already joined?&nbsp;&nbsp;Please&nbsp;</div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowForm(3)">Sign In Here</a></div><br><br>

<br><br><br><br>

<script type="text/javascript">
  document.myform.email_field.focus();
</script>

<script type="text/javascript">
  function OnFocusFn(call) {
    if (call == 1) {
      document.getElementById("passwd").style.borderColor = "rgb    (175,222,162)";
    }
    if (call == 2) {
      document.getElementById("btn_joinnow").style.borderColor = "rgb           (175,222,162)";
    }
  }
</script>

<script type="text/javascript">
  function ShowTermsOfSvc() {
    var elemX = document.getElementById("TOU");
    elemX.style.color = "rgb(175,222,162)";
    var elemY = document.getElementById("button_01_Hidden");
    elemY.style.color = "rgb(100,100,100)";
    console.log(elemY);
    ShowLeftLinks();
  }
</script>

Когда я открываю всплывающую панель закладок Firefox, ящики электронной почты и паролей уменьшаются, поэтому это может быть причиной того, что приведенный выше текст не выравнивается правильно, когда панель закладок открыта.

Итак, мой вопрос:почему строки текста над полями электронной почты и паролей неправильно центрируются над ними, когда открыта панель закладок?Есть ли что-то в почтовых ящиках и паролях, которые мешали бы отзывчивости?Есть ли что-то в всплывающей панели закладок в Firefox, которая вызывает эту проблему с адаптивным дизайном?Это потому, что текст центрируется с помощью отступов?

Ни на одной из других страниц нет отзывчивой проблемы с выпадающим списком закладок Firefox, но это единственная страница, где все центрировано с областью сетки css с использованием заполнения.

Это часть гораздо более крупного проекта, поэтому я разместил его так, как сейчас, без воспроизводимого примера, в надежде, что кто-нибудь узнает ответ на этот вопрос с опубликованным кодом.Я могу привести полный пример, но для этого потребуется некоторое время, поэтому, если никто не сможет ответить с кодом, размещенным выше, мне придется это сделать.Благодарю.

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Вот как я решил это - я использовал гибкий элемент для центрирования в ячейках сетки.

<div class="center_text_grid flex-item header_upload">Welcome</div>

.center_text_grid {
    display: grid;
    grid-column: 5 / 8;
    grid-row: 6 / 19;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.header_upload{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 14pt;
    color: rgb(175,222,162);
}

Спасибо всем, кто ответил.

0 голосов
/ 20 декабря 2018

Вместо использования отступов для структурирования столбцов и строк рассмотрите возможность использования Flexbox.

Вы можете создавать столбцы и строки следующим образом: 

flex-direction: column | column-reverse | row | row-reverse;

Он решает проблемы с макетом быстро, с небольшими сложностями и поддерживается во всех современных браузерах.

Вот полное руководство по Flexbox .

Вот список браузеров, которые поддерживают Flexbox .

...