bounty将在5天后过期。回答此问题可获得+50声望奖励。Newbie_developer希望引起更多人对此问题的关注:我正在尝试了解是什么原因导致了点击输入组件时屏幕移动。我应该做些什么来避免这种移动?
.input--custom {
border: 0.1px solid #cfd7fd;
padding: 15px;
display: block;
height: 100px;
width: 100%;
/* set a fixed width in pixels */
box-sizing: border-box;
/* include border and padding in total width */
word-break: break-word;
/* allow long words to break and wrap to next line */
overflow: hidden;
/* hide any overflow */
;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.input--width {
height: 100px;
white-space: pre-wrap;
overflow-wrap: break-word;
}
textarea::placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.chatbox textarea {
position: absolute;
bottom: 0;
}
textarea:focus {
outline: none;
}
.conversation {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
padding: 10px;
}
.conversation .operator-response {
background-color: rgb(245, 245, 245);
color: #333;
padding: 15px 18px;
border-radius: 10px;
margin-bottom: 10px;
max-width: 80%;
word-wrap: break-word;
text-align: left;
margin-right:auto;
box-sizing: border-box;
clear: both;
margin-bottom: 20px;
margin-top: 20px;
}
.conversation .user-input {
/* background-color: #f4f6ff; */
background-color: #000;
color: white;
padding: 15px 18px;
border-radius: 10px;
margin-bottom: 10px;
max-width: 80%;
word-wrap: break-word;
text-align: right;
margin-left:auto;
box-sizing: border-box;
clear: both;
align-self: flex-end; /* added */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<Modal visible={visible} onCancel={onClose} centered footer={null} // title={title} bodyStyle={{ height: "70vh", overflowY: "auto", margin: "0", padding: "0" }}>
<div style={{overflow: 'auto', height: '60vh'}}>
<div ref={conversationContainerRef}>
<div key={index} class="conversation">
<div class="operator-response">Hi. How can i change settings</div>
<div class="user-input">Go to settings page </div>
</div>
<div style={{display: "flex"}} class="conversation">
<div class="operator-response">Hello how are you</div>
</div>
</div>
</div>
<div class='flexrow'>
<textarea onChange={handleChange} placeholder="Type your message here and click submit" class="input--custom input--width "></textarea>
<img onClick={handleSubmit} class="sendButton" style={{width: "20px", paddingLeft: "20px"}} src={sendIcon}></img>
</div>
</Modal>
我有一个像这样的模态,底部有一个输入组件。当我点击输入组件打字时,屏幕自动聚焦在输入组件上(放大)。因此,我不得不再次拖动并调整位置,才能看到发送按钮。
有没有办法让Modal保持在同一位置而不动?
单击前,这是
的外观
点击输入字段后,这是它的变化
什么属性需要改变以避免瞬间?你还需要其他信息吗?
1条答案
按热度按时间nfeuvbwi1#
如果元素的字体大小小于16px,大多数移动的浏览器的默认行为是缩放。
在您的情况下,您可以添加一个
font-size:16px
到您的.input--custom
类来解决这个问题。以下是Codepen上的一个工作演示(以便在您的移动终端上轻松测试):https://codepen.io/atalaykutlay/pen/vYzapNJ此外,您可以简单地使用下面的 meta标签取消所有缩放,但是只要元素的字体大小小于16px,iOS设备就会一直放大输入字段。