按钮仅部分可点击错误 [英] Button only partially clickable error

问题描述

我有一个非常奇怪的错误，我无法弄清楚为什么按钮的整个红色区域"都无法单击.

I have a very strange error in which I can't figure out why the button is not clickable for the entire 'red area' of the button.

下面是发生的情况的图像.

Attached below is the images of what happens.

当我移到send中的D字符时，它立即变得不可点击.在整个红色区域中，D字符右侧与此有关的所有内容均不可单击.

When I move to the D character in send it becomes immediately not clickable. Everything for that matter to the right of the D character is not clickable either in the entire red space.

下面是整个表单的HTML.这是使用React完成的，所以我包括了该代码，以防万一由于某种原因而联系起来.

The HTML for the entire form is below. This is done using React, so I included that code just in case it's related for some reason.

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文件相关的部分.

Obviously CSS is the first place to look for these errors so I have attached the portion of my SCSS file that is relevant here.

%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，则需要让我知道，我会立即上传.

If I'm missing any other SCSS/CSS you need to see let me know and I'll upload right away.

我尝试过的事情:

我尝试将显示更改为内联代码块而不是flex ，但没有用.我尝试过为控件添加宽度，但仍然行不通.

I have tried changing display to inline-block instead of flex, didn't work. I have tried adding a width to the control and still no go.

我不确定是什么导致了这种奇怪的影响.欢迎任何想法，我会立即尝试.

I'm not sure what is causing this strange effect. Any ideas are welcome and I'll try them right away.

我还尝试过与检查器搞混，只是即时更改CSS属性(实时)，以查看是否可以通过某种方式使该区域可点击，但还是没有运气.

I have also tried messing with the inspector to just change CSS properties on the fly (live) to see if I can get the area clickable somehow, still no luck.

我应该提到我正在使用Google Chrome版本67.0.3396.87在Mac上进行测试

I should mention I'm testing on a Mac using Google Chrome Version 67.0.3396.87

附上检查员的图像，显​​示DIV在理论上应该很好.

Attached is an image from the inspector showing the DIV should be just fine in theory.

推荐答案

好吧，我想通了，这要归功于这里的答案:

Ok turns out I figured it out, thanks to the answer here: Only the left half of the button is clickable in IE

在我的设计中，游泳池清洁器的图像被挡住了，因为它的位置绝对正确.

The image of the pool cleaner in my design was getting in the way because it was positioned absolutely.

通过将CSS添加到该元素中 pointer-events:none;

By adding the CSS to that element pointer-events: none;

它解决了这个问题.

这篇关于按钮仅部分可点击错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！