The cursor jumps to the beginning of the RTL sentence whenever I type and press space.
I saw the same issue in both of the following text-areas
textarea[data-type="alpha"] {
/* reset: outline, resize */
/* UI: width, max-height, min-height, background, padding, ... */
box-sizing: border-box;
/* for scroll bar */
will-change: transform;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
textarea[data-type="alpha"]::placeholder {
text-align: right;
}
textarea[data-type="beta"] {
/* reset: outline, resize */
/* UI: width, line-height, background, padding, ... */
display: block;
box-sizing: border-box;
text-align: right;
font-family: inherit;
}
<textarea
data-type="alpha"
placeholder="Alpha example text"
dir="auto"
autocapitalize="sentences">
</textarea>
<textarea
data-type="beta"
placeholder="Beta example rtl text"
dir="auto"
maxlength="100">
</textarea>
I'm using chrome 89.0.4389.90 on an Android device.
Here is a full reproducible fiddle at JSFiddle
update 🆕
I need the text area to support both RTL and LTR texts, and preferably not determined the direction of texts with js and add direction: rtl or ltr to the text area. cause text area may contain both text types at the same time and it will cause e.g. partners to behave oddly.
Text area is working fine with the LTR texts
Text area is working fine in the desktop chrome. means that don't change the position of the cursor to the beginning.
Is there a way to fix this?
I guess it is somehow related to chrome updates, but I don't know-how.
Related
I've got a css background animation set to overflow:hidden on the body tag (Codepen below).
body {
overflow: hidden;
}
I also have regular page content that I still need to scroll as usual.
The overflow:hidden on the body obviously prevents this.
Is there any way to retain a regular scroll on my page content?
https://codepen.io/lowercase01/pen/GRrzQxG
I have come up with a solution I think addresses the problem you are trying to solve.
Following is a summary of what I have done.
I have wrapped the .background div into what I've called the .background-container. I then have set the .background-container height to 0, removed the the overflow:hidden from the body and, then reordered the divs so that the .wrapper div comes last.
Here is a link to the codepen, https://codepen.io/zukomgwili/pen/GRrzQeY.
How to hide scrollbar in browsers (Still scrollable)
/* Webkit */
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Firefox */
html {
scrollbar-width: none;
}
I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.
This change is for the mobile version of the site (the #media section for landscape tablets)
Currently, the header (h2) text is overlapping on an iPad/tablet.
Code from the h2 #media section:
.da-slide h2{
font-size: 36px;
width: 80%;
top: 40px;
padding: 18px 20px 18px 20px;
(The .da-slide h2 is the component that holds this text in the html)
I tried the line-height property but it didn't work?
Any ideas...
Are you sure that the line-height css property has been apply to your class?
CSS
.da-slide h2{
font-size: 36px;
line-height: 36px;
width: 80%;
top: 40px;
padding: 18px 20px 18px 20px;
}
Otherwise, have you added the meta tag in the header?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, for responsive website, be sure that the text isn't ajusted:
CSS
body { -webkit-text-size-adjust: none; }
This should do it by preventing the text from wrapping, but it will cut off the end text. i.e. won't display any text longer than the width.
Just add it to existing class:
display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */
Personally I like to use the ellipsis effect for long titles and tablet devices. Ellipsis trims the text and adds three dots where text has been trimmed.
text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text continues */
Example of effect below:
This is an extremely long and completely unavoidable page title I need to show
This is an extremely long and completely unavoidable page title I need to show
Depending on width might display as:
This is an extremely long...
Hope that helps.
enter image description here
I am assuming this is your problem if it is you can fix it by changing
line-height : 60px like change what ever your want CSS property *line-height
I an using a text-area of fixed size in a form to take input from user.Even though I have made the resize property of the text-area none the scroll bar is still getting displayed as seen in the picture.I don't want the scroll bar getting displayed in the text-area.
The code is working properly in Firefox and chrome though without any errors but in IE it's not..
HTML code...
<label for="qual" class="label">Description and Quantification of Impact to the extend possible:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>
CSS code...
.label
{
float: left;
width:120px;
padding:10px 30px;
<!--font-weight:bold;-->
}
textarea
{
<!--margin-bottom:90px;
margin-top:50px";-->
vertical-align:top;
}
.textarea
{
resize :none;
border: none;
width: 100%;
-webkit-box-sizing: border-box; <!-- <=iOS4, <= Android 2.3 */-->
-moz-box-sizing: border-box; <!-- FF1+ -->
box-sizing: border-box; <!-- Chrome, IE8, Opera, Safari 5.1-->
}
The output I'm getting in IE 8..
Even though i don't want the unselected scroll bar to appear it's still getting displayed..
I tried putting the code in jsfiddle but it won't open in IE 8 without errors that's why I posted the code and picture here..
just put style="overflow-y:hidden" to remove scroll
resize has nothing to do with scrollbars. You're looking for overflow.
If you want the scrollbar to appear only when the content is long enough to scroll, use overflow:auto
If you want to prevent all scrolling, use overflow:hidden
Just add overflow: auto; to textarea.
See http://jsfiddle.net/Volker_E/eQF22/2/embedded/result/
You could also add different properties specifically for horizontal overflow-x: hidden; or vertical overflow-y: scroll; (making scrollbars always persistent) scrollbars.
I have a textarea which is dynamically create/inserted into the DOM. If the text area is below 75px height and the text inside of it exceeds that then you would expect a scroll bar however you don't see it.
Any other textarea that is larger than 75px will show the scroll bar properly.
Is there a way to fix this, or is that just a Firefox default behavior?
Here is my CSS
textarea {
position:absolute;
border:0;
overflow:auto;
resize:none;
}
UPDATED: The behavior is now not consistent, now it goes down to 60px below 60px no scrollbar
Works for me with height smaller than 75px. However, when the height of textarea is very small (about 35px) scrollbar won't fit and is therefore not displayed. Try adding following CSS for the textarea:
textarea {
resize: none; //disable resizing, so that the scrollbar is 100% high
overflow: auto;
}
As Firefox and Internet Explorer simply do not support any CSS styling of the scrollbar. Using a plugin really is your only option
We need bigger text inputs for our forms, so easy enough, we just set the height on them... But Firefox 3.5 then keeps the text at the top. How do I vertically center it? On Firefox 3.6, IE8, Chrome and Safari, the text is vertically centered as I hoped.
<form>
<input type="text" style="height: 50px"/>
</form>
How do I make the text in this form centered in its input box?
Use padding instead...
input[type=text] {
padding: 25px 0; /* experiment with padding */
}
or
Use the line-height hack...
(only works with single line inputs, not textareas)
input[type=text] {
line-height: 50px;
height: 50px;
}