SweetAlert：需要增加文本区域的大小

Question

我无法增加 pops-up 的甜蜜警报的 text-area ，我想根据我的规范重新设置它，我可以增加模态高度和宽度，而不是text-area。需要对此提供意见

在CSS中尝试了.swal-height和.swal-width并给出了合适的classname。但是无法设置 text-area 大小。

handleDelete() {

var delreq;
var response_data;
var response_jsonObj;


swal("Enter notes:", {
  content: "input",
}).then((value) => {
  isDeleted = "Yes";
delreq = {
  "DeleteRequest":
    [
      {
        "Param-1": val1,
        "Param-2": val2,
        "Param-3": "val3",
        "Param-4": val4,
        "Param-5": val5
      }
    ]
};
console.log('delreq',delreq);
fetch('API_URL', {
  headers: {
    'Accept': 'application/json, text/plain, application/xml,  */*',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type',
  },
  method: 'POST',
  body: JSON.stringify(delreq)
}
).then(response => {
  if (response.status !== 200) {

    return;
  }
  response.text().then(data => {

    response_data = data;
    response_jsonObj = JSON.parse(response_data);
    this.setState({ delval: response_jsonObj });

  });
}).catch(error => this.setState({ error }));

swal({
  title: "Deleted Successfully!",
  icon: "success",
  confirmButtonText: 'OK'
}).then((okay) => {
  if (okay) {
    history.push('/page1');
    history.push('/page2');
  }
});
});

}

希望 text-area 比现在显示的更大。

Answer 1

已解决。我使用了最新版本的 SweetAlert，即 Sweetalert2，这让我的事情变得更容易。我使用了 SweetAlert2 官方网站 (https://sweetalert2.github.io/) 中的代码片段来完成任务。在这里：

Swal.fire({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})

Answer 2

就像上面尝试使用 SweetAlert 2 一样，我有一个类似的问题，只是把

.swal2-popup {
  font-size: 1.6rem !important;
}

关于你模块的 CSS 样式，这对我的文本有帮助，我猜文本是根据你的字体大小自动调整大小的

SweetAlert：需要增加文本区域的大小

SweetAlert : Need To Increase the size of text area

twitter-bootstrap

reactjs

sweetalert