Основание: панель поиска в Navbar простирается слишком далеко внизу

0

У меня есть проблема с дизайном моего форума navbar:

navbar http://i44.tinypic.com/15yupz8.png

В принципе, панель поиска отключена (вы можете сказать, что она простирается до далекой до нижней части навигационной панели. Мой вопрос: есть ли какие-либо трюки или ошибки CSS, которые я не замечаю, что вызывает эту ошибку? в основном то же, что и докторант Zurb Foundation, поэтому я не знаю, что происходит...

URL-адрес нашего веб-сайта - http://calapps2.herokuapp.com, а код ниже (в Haml). Примечание. Поскольку я разрабатываю приложение в Rails, мне нравится иметь минимальный CSS, поэтому я фактически не использую никаких дополнительных CSS, кроме кода Foundation.

%nav.top-bar{:data=>{:topbar => true}}
  %ul.title-area
    %li.name
      %h1=link_to "CalApps", '/'
  %section.top-bar-section
    %ul.left
      %li.has-form
        .row.collapse
          .large-8.small-9.columns
            %input{:type => "text", :placeholder => "Find"}
          .large-4.small-3.columns
            %a.alert.button.expand{:href => "#"} Search
      %li.divider

Все мои CSS содержатся в одном заявлении:

@import "foundation_and_overrides";
/* Add imports of custom sass/scss files here */

Вышеупомянутый код CSS содержится здесь: https://github.com/CS169-badjr/calapps/blob/master/app/assets/stylesheets/application.css.scss

В той же папке есть код для Foundation, normalize.css и других лакомств.

  • 0
    Там нет соответствующего CSS, кроме кода Foundation.
Теги:
zurb-foundation

4 ответа

1
Лучший ответ

В поле "Входящие" есть значение height и margin-bottom, т.е. для input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea класса input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea

Если вы попытаетесь обновить или указать определенную высоту и маржирование в папке "Входящие", она не будет выходить за пределы вашей панели навигации.

пример CSS

large-8 input
{
  height: 28px;
    margin: 0;
}

Вы также можете попробовать стиль элемента, если вы не можете изменить данный CSS.

Поделиться
  • 0
    Это не помогает в изменении поля ввода поиска, к сожалению ...
  • 0
    Можете ли вы сказать мне, почему это не может быть использовано? так что я могу предоставить другое решение.
Показать ещё 5 комментариев
0

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

.searchinput {height: 30px !important;}

Я применил это как к кнопке, так и к текстовому полю. Я обнаружил, что если вы просто сжимаете текстовое поле, тогда исправление ломается в firefox. Поэтому я сделал равную высоту.

Поделиться
0

Фактически, я добавил пользовательский класс в поле ввода "searchinput",

.searchinput {
 height: 30px !important;
}

Тем не менее, я должен выяснить, почему в демонстрациях на веб-сайте Фонда нет этой проблемы.

Поделиться
0

переопределить правила со следующими:

.top-bar input {
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
}
@media only screen and (min-width:40.06em)
.top-bar input, .top-bar .button {
    font-size: 0.77rem;
    position: relative;
    top: 7px;
}
.top-bar .button {
    padding-top: 0.45rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0px;
    font-size: 0.75rem;
}

это решит проблему yout

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню