CSS для field_with_errors - PullRequest
Новая
       4

CSS для field_with_errors

3 голосов
/ 04 ноября 2010

Я чувствую себя глупо, задавая такой тривиальный вопрос, но, ну да, это меня давно беспокоит. У меня есть форма, которая правильно оформлена. Когда пользователь отправляет, если есть ошибки, форма будет отображаться снова, но на этот раз поля, в которых есть ошибки, находятся между <div class="field_with_errors">
Знайте, проблема в том, что это создает дополнительное пространство после текста, обратите внимание на дополнительное пространство после Contrasena. Как я могу избавиться от этого места? 


<div class="field_with_errors"><input id="user_email" name="user[email]" size="30"      type="text" value=""></div>>

Вот полный пример HTML, чтобы вы могли точно понять, о чем я говорю: 


<html><head>
    <title>foo</title>
  </head>
  <body>
    <header>
    </header>
    <section class="container">
      <div class="formbox">
        <h1>Registrarse</h1>
        <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="nP/JKdZYGviu1y/+nyxyvKBUHuJzsAbkZRQgX87UIy8="></div>
          <!-- = render &#39;shared/error_messages&#39;, :object => f.object -->
          <div class="text">

<label for="user_email">Email</label>
            <br>
            <div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>
          </div>
          <div class="text">
            <div class="field_with_errors"><label for="user_password">Contrasena</label></div>
            <br>
            <div class="field_with_errors"><input id="user_password" name="user[password]" size="30" type="password" value=""></div>
          </div>
          <div class="text">
            <label for="user_password_confirmation">Confirmacion</label>
            <br>
            <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="">
          </div>
          <div class="actions">
            <input class="button_green" id="user_submit" name="commit" type="submit" value="Registrarse">
          </div>
        </form>
      </div>
    </section>
    <footer>
    </footer>

</body></html>

Ответы [ 4 ]

3 голосов
/ 05 июня 2013

Вы также можете попробовать: 

div.field_with_errors + br {
  display: none
}

Это скрывает теги br, которые следуют сразу за div класса class_with_errors.

3 голосов
/ 04 ноября 2010

Попробуйте: удалите теги <br /> из выводимого HTML-кода и введите стиль field_with_errors следующим образом: 

.field_with_errors {
  display: block;
  clear: both;
}
0 голосов
/ 11 августа 2014

Если вы используете SCSS, вы можете сделать это: 

  .field_with_errors {
    + br {
      display: none;
    }

    input, select {
      border: 1px solid red;
    }
  }
0 голосов
/ 06 декабря 2011

Для этого вопроса 

.text br {
    display: none;
}

по умолчанию рельсы 3: 

.field br {
    display: none;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...