кнопка радио iphone выглядит странно при использовании дисплея flex - PullRequest
0 голосов
/ 30 апреля 2018

Я использую «display: flex;» выровнять предложения в моих кнопках радио, но это выглядит странно, используя iPhone. Пожалуйста, смотрите скриншот:

enter image description here

Если я убрал «display: flex;» переключатель отлично выглядит, но текстовые предложения не выровнены на скриншоте.

Это происходит только на всех iPhone, кроме Android. Посмотрите этот пример кода ниже (запустите его на iPhone, и вы увидите странные размеры переключателей)

.form-check label {
    margin-bottom: 10px;
    font-size: 18px;
    width: 300px;
    display: flex;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

label.form-check-label input {
 margin-right: 10px !important; 
}
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" number="1" aria-label="..." value="I have my own ecommerce business"> I have my own ecommerce business (or want to build one)
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio2" number="2" aria-label="..." value="I work for an ecommerce company"> I work for an ecommerce company
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio3" number="3" aria-label="..." value="I'm a freelancer / solo consultant doing marketing for ecommerce clients"> I'm a freelancer / solo consultant doing marketing for ecommerce clients
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio4" number="4" aria-label="..." value="I run or work for a marketing agency"> I run or work for a marketing agency
	</label>
	</div>

Пожалуйста, помогите, что должно быть сделано.

Спасибо заранее.

1 Ответ

0 голосов
/ 30 апреля 2018

ИСПРАВЛЕНО! Я добавил минимальную ширину для входного радио

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...