Размер поля поля настраиваемого CSS отсутствует при просмотре на мобильном телефоне

У меня есть пользовательский флажок, написанный в CSS, который выглядит как ожидаемый в разработке. Но при просмотре на мобильном телефоне (через Heroku), правый край не показывает, как можно видеть здесь:Размер поля поля настраиваемого CSS отсутствует при просмотре на мобильном телефоне

Любая идея, почему правое поле исчезает, когда он правильно установлен в CSS ?

Пользовательские флажок CSS:

input[type="checkbox"], 
.checkbox input[type="checkbox"], 
.checkbox-inline input[type="checkbox"] { 
    position: relative; 
    border: none; 
    margin-bottom: -4px; 
    -webkit-appearance: none; 
    appearance: none; 
    cursor: pointer; 
} 
input[type="checkbox"]:focus, 
.checkbox input[type="checkbox"]:focus, 
.checkbox-inline input[type="checkbox"]:focus { 
    outline: none; 
} 
input[type="checkbox"]:after, 
.checkbox input[type="checkbox"]:after, 
.checkbox-inline input[type="checkbox"]:after { 
    content: ""; 
    display: block; 
    width: 18px; 
    height: 18px; 
    margin-top: -2px; 
    margin-right: 1rem; 
    border: 2px solid #8D8D8D; 
    border-radius: 4px; 
    -webkit-transition: 240ms; 
    -o-transition: 240ms; 
    transition: 240ms; 
} 
input[type="checkbox"]:checked:before, 
.checkbox input[type="checkbox"]:checked:before, 
.checkbox-inline input[type="checkbox"]:checked:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 6px; 
    display: table; 
    width: 6px; 
    height: 12px; 
    border: 2px solid #fff; 
    border-top-width: 0; 
    border-left-width: 0; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
input[type="checkbox"]:checked:after, 
.checkbox input[type="checkbox"]:checked:after, 
.checkbox-inline input[type="checkbox"]:checked:after { 
    background-color: #00B1FF; 
    border-color: #00B1FF; 
} 
input[type="checkbox"]:disabled:after, 
.checkbox input[type="checkbox"]:disabled:after, 
.checkbox-inline input[type="checkbox"]:disabled:after { 
    border-color: #DFDFDF; 
} 
input[type="checkbox"]:disabled:checked:after, 
.checkbox input[type="checkbox"]:disabled:checked:after, 
.checkbox-inline input[type="checkbox"]:disabled:checked:after { 
    background-color: #DFDFDF; 
    border-color: transparent; 
} 
.has-warning input:not([type=checkbox]), 
.has-warning .form-control, 
.has-warning input.form-control[readonly], 
.has-warning input[type=text][readonly], 
.has-warning [type=text].form-control[readonly], 
.has-warning input:not([type=checkbox]):focus, 
.has-warning .form-control:focus { 
    border-bottom: none; 
    -webkit-box-shadow: inset 0 -2px 0 #FFD200; 
    box-shadow: inset 0 -2px 0 #FFD200; 
} 
.has-error input:not([type=checkbox]), 
.has-error .form-control, 
.has-error input.form-control[readonly], 
.has-error input[type=text][readonly], 
.has-error [type=text].form-control[readonly], 
.has-error input:not([type=checkbox]):focus, 
.has-error .form-control:focus { 
    border-bottom: none; 
    -webkit-box-shadow: inset 0 -2px 0 #FF193C; 
    box-shadow: inset 0 -2px 0 #FF193C; 
} 
.has-success input:not([type=checkbox]), 
.has-success .form-control, 
.has-success input.form-control[readonly], 
.has-success input[type=text][readonly], 
.has-success [type=text].form-control[readonly], 
.has-success input:not([type=checkbox]):focus, 
.has-success .form-control:focus { 
    border-bottom: none; 
    -webkit-box-shadow: inset 0 -2px 0 #00FFD2; 
    box-shadow: inset 0 -2px 0 #00FFD2; 
} 
.has-warning .input-group-addon, 
.has-error .input-group-addon, 
.has-success .input-group-addon { 
    color: #F8F8F8; 
    border-color: transparent; 
    background-color: transparent; 
}

источник

2015-09-28 Chlump Chatkupt

Вы пробовали использовать другой блок, отличный от 'rem'? –

Да, я пробовал px и% безрезультатно. –

Мой друг дал ответ. Ключ для перемещения строки:

margin-right: 1rem;

к первому блоку:

input[type="checkbox"], 
.checkbox input[type="checkbox"], 
.checkbox-inline input[type="checkbox"] { 
    position: relative; 
    border: none; 
    margin-bottom: -4px; 
    margin-right: 1rem; 
    -webkit-appearance: none; 
    appearance: none; 
    cursor: pointer; 
}

Я также изменил display: table к display: block.

Теперь все выглядит по своему желанию.

источник

2015-09-28 23:04:47

Размер поля поля настраиваемого CSS отсутствует при просмотре на мобильном телефоне

ответ

Смежные вопросы