У меня очень странная ошибка, из-за которой я не могу понять, почему кнопка не реагирует на нажатия для всей «красной области» кнопки.
Ниже приведены изображения того, что происходит.
Когда я перехожу к символу D при отправке, он сразу становится недоступным для нажатия. Все, что относится к этому вопросу справа от символа D, также невозможно щелкнуть во всем красном поле.
HTML-код для всей формы приведен ниже. Это делается с помощью React, поэтому я включил этот код на тот случай, если по какой-то причине он связан.
import React, { Component } from 'react';
import { FormGroup, FormControl, Button } from "react-bootstrap";
import MaskedFormControl from 'react-bootstrap-maskedinput'
export default class defaultHomeForm extends Component {
render(){
return(
<form onSubmit={this.props.handleSubmit}>
<FormGroup
controlId="formName"
validationState={this.props.formValidation("name")}
className="quote-fields"
>
<FormControl
type="text"
name="name"
placeholder="Name"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formPhone"
validationState={this.props.formValidation("phone")}
className="quote-fields"
>
<MaskedFormControl
type='text'
name='phone'
mask='(111)-111-1111 x11111'
placeholder="Phone"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formEmail"
validationState={this.props.formValidation("email")}
className="quote-fields"
>
<FormControl
type="email"
name="email"
placeholder="Email"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup
controlId="formAddress"
validationState={this.props.formValidation("address")}
className="quote-fields"
>
<FormControl
type="text"
name="address"
placeholder="Address"
className="form-field"
onChange={this.props.setProperty}
/>
<FormControl.Feedback />
</FormGroup>
<div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
</form>
);
}
}
Очевидно, что CSS является первым местом для поиска этих ошибок , поэтому я приложил часть моего файла SCSS, которая имеет отношение к этому.
%send-btn {
padding: 5px;
.send-btn-text{
background-color:red;
}
.btn {
background: transparent;
border: none;
font-size: 25px;
font-weight: 500;
color: #fff;
text-transform: uppercase;
display: flex;
align-items: center;
&:hover{
color: #1899d1;
}
i {
&:first-child {
padding-left: 5px;
}
}
}
}
%quote-fields {
padding: 0px 15px 10px;
margin: 0px;
.form-field {
background: transparent;
padding: 12px;
height: 43px;
margin-bottom: 12px;
color: #ffffff;
border-radius: 2px;
border: 1px solid #dcdcdc78;
}
}
Если мне не хватает каких-либо других SCSS / CSS, которые вам нужно увидеть, дайте мне знать, и я сразу же загрузю.
Вещи, которые я пробовал:
Я попытался изменить дисплей на встроенный блок вместо flex , не сработало. Я попытался добавить ширину к элементу управления и все еще не пошел.
Я не уверен, что вызывает этот странный эффект. Любые идеи приветствуются, и я попробую их сразу.
Я также пытался связываться с инспектором, чтобы просто изменить свойства CSS на лету (в режиме реального времени), чтобы посмотреть, смогу ли я как-нибудь сделать область кликабельной, но все равно не повезло.
Следует отметить, что я тестирую на Mac с использованием Google Chrome версии 67.0.3396.87
Приложено изображение инспектора, показывающее, что с DIV в теории все должно быть в порядке.
