Кнопка становится скрытой

Question

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

У меня проблемы с решением этой проблемы, может кто-нибудь мне помочь?

Я считаю, что это должно быть просто для решения, я просто не смог найти решение

ниже приведен код JSX (React) и CSS код

если вы посмотрите на изображение, вы сможете лучше понять проблема

JSX (React) code below:

        
          
            {data.subject}
             this.props.visible(false)}
            >
              
            
          
          
            
              {ReactHtmlParser(this.state.message)}
            
            
              
            
            
              
              {this.state.buttonState ? (
                 Enviar ): ( Enviar )}     

CSS код ниже:

.Container {
  width: 720px;
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  background: #f9f9f9;
  border-radius: 5px;
  border: 2px solid #405c77;
  resize: both;
  overflow: auto;
}

.Header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #405c77;
  padding: 20px;
  flex-wrap: wrap;
}

.Title {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.Wrapper {
  /* flex: 1 1 100%; */
  height: 100%;
  display: grid;
  /* grid-template-rows: 60% 30% 40px; */
  grid-template-rows: minmax(5px, 1fr);
}

.Message {
  /* height: 100%; */
  margin: 10px;
  padding: 10px;
  display: grid;
  border-radius: 5px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.111);
}

.Editor {
  height: calc(30% - 40px);
  /* height: 100%; */
  margin: 10px;
}

textarea {
  width: 100%;
  height: 160px;
  resize: none;
  padding: 5px;
}

.Buttons2 {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: none;
}

.SendButton {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 30px;
  cursor: pointer;
  padding: 10px;
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 5px;
  outline: none;
  background: rgba(64, 92, 119, 0.8);
  transition: all 0.1s ease-in-out;
  color: #fff;
}

.SendButton:hover {
  transition: all 0.1s ease-in-out;
  background: rgba(64, 92, 119, 0.999);
}

.ButtonDisabled {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 60px;
  height: 30px;
  background: red;
  padding: 10px;
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 5px;
  outline: none;
  color: #fff;
}

.Controls {
  /* height: 40px; */
  /* height: 100%; */
  display: flex;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.Controls input {
  margin-top: 12px;
  cursor: pointer;
  padding: 12px;
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 5px;
  outline: none;
}

Answer 1

попробуйте это:

{

position:fixed;
top:0;
z-index:5;

}

Answer 2

Может быть, попробовать поместить свою кнопку в div редактора?

    <div class={style.Editor}>
          <ReactQuill
            value={this.state.content}
            onChange={this.handleType}
          />
       <div class={style.Controls}>
          <input type="file" multiple onChange={this.fileSelected} />
          {this.state.buttonState ? (
            <button class={style.SendButton} type="submit">
              Enviar
            </button>
          ) : (
            <button class={style.ButtonDisabled} disabled>
              Enviar
            </button>
          )}
        </div>
        </div>

Это сложно без возможности проверить его должным образом