Padding у input тектса
Спросил cluboy,
27 февраля 2014
Вопрос
cluboy
Все инпут поля вписываются в рамки «form-content», а когда устанавливаем:
То происходит увеличение длины инпута и выход его за пределы?
И второй вопрос — как вписать эти инпут-поля в «form-content», чтобы они не вылезали?
Ссылка на комментарий
Поделиться на других сайтах
3 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Здравствуйте, подскажите, пожалуйста, в чем может быть проблема: при вертске, блоки текста имеют совсем иные переносы нежели на макете.
Шрифт, насыщенность(font-weight), размер — все как на макете, но что-то, видимо, все равно не так.
Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.
Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)
Решил поэкспериментировать с динамическим изменением индикации, вот по этому заданию. Как мне казалось, это реально: стили для любого значения параметра загружаются сразу, изменяется параметр — сразу применяются стили, соответствующие новому параметру. Но почему-то эта «динамика» работает, только для параметра, заданного по-умолчанию. Почему стили не применяются к изменённому параметру? Какова тут логика работы и возможно ли подобное, сделать на чистом CSS? Спасибо.
PS: ну и до кучи — буду рад инфе, как стилизовать input type=’number ‘?
Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в «строке» с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
Для второго элемента указано свойство:
padding-left: calc(50% — 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше — отступ больше),
если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center. Можно было бы как-то изловчится с паддингами (что-то вроде 15rem — 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом — не сдвигать.
Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1
В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ — нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин — будет действовать в обе стороны, а паддинг — в одну, но только вправо, а мне нужно налево.
В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это «не туда» скомпенсировать не может, поскольку сам вылезает туда же, в «не туда».
Каким образом приручить эти элементы?
Источник
IE padding в input не учитываеться
Спросил Viper,
30 апреля 2013
Вопрос
Viper
Думаю большинству знакомый баг в IE, когда при наборе длинного текста в input горизонтальный paddng не учитываться. И если в этом padding’е расположено фоновое изображение, то текст налазит на него.
Обычно это решается дополнительным враппером/контейнером. Но как же не хочется для каждого такого поля добавляться дополнительный контейнер только, что бы исправить этот баг в IE.
Существует ли решение этой задачи, без использования дополнительных тегов или js?
Изменено 30 апреля 2013 пользователем Viper
Ссылка на комментарий
Поделиться на других сайтах
3 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)
Решил поэкспериментировать с динамическим изменением индикации, вот по этому заданию. Как мне казалось, это реально: стили для любого значения параметра загружаются сразу, изменяется параметр — сразу применяются стили, соответствующие новому параметру. Но почему-то эта «динамика» работает, только для параметра, заданного по-умолчанию. Почему стили не применяются к изменённому параметру? Какова тут логика работы и возможно ли подобное, сделать на чистом CSS? Спасибо.
PS: ну и до кучи — буду рад инфе, как стилизовать input type=’number ‘?
Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в «строке» с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
Для второго элемента указано свойство:
padding-left: calc(50% — 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше — отступ больше),
если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center. Можно было бы как-то изловчится с паддингами (что-то вроде 15rem — 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом — не сдвигать.
Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1
В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ — нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин — будет действовать в обе стороны, а паддинг — в одну, но только вправо, а мне нужно налево.
В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это «не туда» скомпенсировать не может, поскольку сам вылезает туда же, в «не туда».
Каким образом приручить эти элементы?
———————————————————————————————————————————————————
#container <
margin: 0 auto;
>
#container .header <
border-bottom: 1px solid #bfbfbf;
box-shadow: 0 0 3px #dbdbdb;
padding-top: 6px;
>
#container .header .wrap <
display: flex;
justify-content: space-between;
padding: 0;
>
@media (max-width: 650px) <
.header .wrap <
flex-direction: column;
padding: 0 3px;
margin-bottom: 5px;
>
.header #socials <
margin-left: 5px;
>
.header #socials a:last-child <
margin-right: 2px;;
>
>
#container .header .header_left <
align-self: center;
>
#container .header .header_right <
display: flex;
justify-content: space-between;
>
#container #topmenu <
color: #8e8e8e;
padding-top: 6px;
>
#container #topmenu a <
color: #8e8e8e;
text-decoration: none;
>
#container #topmenu a:hover <
color: #dd5555;
>
#container #social <
display: flex;
margin-left: 20px;
margin-right: 50px;
>
#social a <
margin-top: 9px;
margin: 8px 10px;
>
.twitter <
background: url(«../images/twitter_un.png») no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
>
.twitter:hover <
background: url(«../images/twitter.png») no-repeat;
height: 11px;
width: 13px;
>
.dribbble <
background: url(«../images/dribbble_un.png») no-repeat;
height: 13px;
width: 13px;
cursor: pointer;
>
.dribbble:hover <
background: url(«../images/dribbble.png») no-repeat;
height: 13px;
width: 13px;
>
.vimeo <
background: url(«../images/vimeo_un.png») no-repeat;
height: 12px;
width: 13px;
cursor: pointer;
>
.vimeo:hover <
background: url(«../images/vimeo.png») no-repeat;
height: 12px;
width: 13px;
>
.facebook <
background: url(«../images/facebook_un.png») no-repeat;
height: 13px;
width: 7px;
cursor: pointer;
>
.facebook:hover <
background: url(«../images/facebook.png») no-repeat;
height: 13px;
width: 7px;
>
.instagram <
background: url(«../images/instagram_un.png») no-repeat;
height: 12px;
width: 12px;
cursor: pointer;
>
.instagram:hover <
background: url(«../images/instagram.png») no-repeat;
height: 12px;
width: 12px;
>
.reddit <
background: url(«../images/reddit_un.png») no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
>
.reddit:hover <
background: url(«../images/reddit.png») no-repeat;
height: 11px;
width: 13px;
>
Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width:
В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:
Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:
На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет «прилипание» header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.
Источник