Keyboard overlaps on the input/textarea located in the bottomenter image description here
.chat {
// display: flex;
// flex-flow: column;
// justify-content: space-between;
// align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
textarea {
position: absolute;
left: 15px;
bottom: 15px;
// margin-top: 550px;
// margin-left: 15px;
width: calc(100% - 30px);
height: 100px;
padding: 6px 50px 6px 6px;
border: none;
border-radius: 8px;
background-color: rgb(35, 35, 35);
outline: none;
font-size: 20px;
resize: none;
z-index: 1;
}
}
Telegram: 9.3.2
IOS: 16.1.2
I have tried a lot of approaches: different position types, display flex, interactive widget=resizes-content, and somehow getting the height of the keyboard/visible view. Unfortunately, all of these approaches were unsuccessful.
It's need to be:
enter image description here
Related
I have a Text Messaging Mobile Site App that has the following divisions and CSS
.messageDisplay {
background-color: #ffffff;
position: absolute;
z-index: 99999;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
overflow-x: hidden;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transform: translateY(100%);
}
.messageDisplayHeader {
display: flex;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
align-items: center;
background-color: #ffffff;
position: relative;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.messageDisplayTextboxArea {
height: 3.5em;
position: relative;
box-shadow: rgb(0 0 0 / 16%) 0px -1px 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
background-color: #000000;
}
.messageTextbox {
resize: none;
height: 2.5em;
width: calc(100% - 14%);
background-color: #fef3f1;
border: none;
border-radius: 100px;
padding-left: 1em;
padding-top: 0.5em;
padding-right: 1em;
color: #fc768a;
}
<div class="messageDisplay" id="messageDisplay">
<div class="messageDisplayHeader"></div>
<div class="messageDisplayBody" id="messageDisplayBody">
</div>
<div class="messageDisplayTextboxArea" id="messageDisplayTextboxArea">
<textarea id="messageTextbox" class="messageTextbox" maxlength="300" placeholder="Type a message"></textarea>
<div class="messageSendBtn" id="messageSendBtn">
<i data-feather="chevron-right"></i>
</div>
</div>
</div>
When using an IOS Device to focus in on the textarea the whole page shifts up.
When the textarea is focused out, the page stays shifted upwards.
I tried to solve this by doing the following:
var messageTextBoxEle = document.getElementById('messageTextbox');
messageTextBoxEle.onfocus = function(){
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
Right now it behaves as such
I also tried setting the page's margin-bottom:0; when the textarea is focused out but it doesnt seem to work.
Anyone have suggestions?
This is what it looks at 100% Looks good at 100%. but as soon you zoom in/out the element shifts slightly This is what it looks like at 125%
Here is the css for the "blue dropdown" element
.blueDropdown {
position: absolute;
width: 20px;
min-height: 100%;
background: #3075b5;
border-radius: 0px 4px 4px 0px;
}
and here is the css for the border that i want to match it with
.dropdownBorder {
box-sizing: border-box;
position: relative;
top: 24px;
width: 70%;
min-height: 100%;
background: #fafafa;
border: 2px solid #3075b5;
border-radius: 10px;
left: 395px;
cursor: pointer;
text-decoration: none;
background-color: transparent;
z-index: 1;
display: flex;
justify-content: end;
}
Here is the html
<Row className="dropdownBorder" style={{paddingRight: "0px"}}>
<div className="blueDropdown"></div>
</Row>
So what causes it to shift in Chrome/Edge but not in Firefox?
Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.
This is what I am trying to do:
My current code works as you can see in this codepen: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100
The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin:10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center; }
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
clip-path: circle(50% at 50% 50%);
background-color: #fff;
border: 0.8rem solid #fff; }
.card__text-content {
position: absolute;
top: 6rem; }
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem; }
In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.
Demo:
body {
background-color: gray;
}
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin: 10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
}
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
border-radius: 50%; /* instead of clip-path */
background-color: #fff;
border: 0.8rem solid #fff;
}
.card__text-content {
position: absolute;
top: 6rem;
}
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem;
}
<div class="card">
<div class="card__inner-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
<div class="card__text-content">
<h4 class="card__heading">We help charities</h4>
<p>Share knowledge and working practice to make the best technology choices.</p>
</div>
</div>
</div>
you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg
I'm attempting to set up an anchor tag to scroll from bottom to top of the page, and the functionality works fine - but the arrow icon I want to display isn't showing up from the linked CSS.
HTML
CSS
/*Anchor to move to top*/
.anchorScroll {
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
background: #8994a5;
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
And here is a JS Fiddle link. Thanks in advance for any help that anyone can offer.
You have change this:
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
to this:
background:url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
Changed "content" to "background", put the link to quotations, and removed 200x200.
Full code is here:
.anchorScroll {
background:#8994a5 url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
You need to remove 200x200 from content url link see below
.anchorScroll {
content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg);
background: #8994a5;
color: #fff;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
border-radius: 3px;
}
I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input