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.
Related
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.
I'd like for my divs to not have that white area (where the scroll bar thumb appears). I'm not sure how to recreate this because it appears randomly on chrome and safari.
this is the div
.column-content{
height:60vh;
padding: 10px 3px 0 3px;
overflow:scroll;
touch-action: none;
#media screen and (min-height:1100px){
height: 70vh;
}
}
I need it scrollable but I also don't want that ugly white bar to show up... I've tried setting the webkit scroll track on my index.html file but it doesn't do anything.
maybe you are searching for the webkit-scrollbar ?
.column-content::-webkit-scrollbar {
display: none;
}
but as it is webkit, it's not compatible with all browsers.
aslo you set overflow:scroll, do you need scrolling on the two axis ? if not, you can consider setting it to auto.
I am building a site where I need a certain div to be horizontal scrollable when overflown if the content is bigger than the screen. Okay, so this is easy - and it works on all browser but it doesnt work perfectly on Safari:
Scenario: Load page in potrait on iPad or iPhone. Content in the scrollable div is bigger than the screen. The scroll works fine. Now I rotate the screen to landscape and the content is now smaller than the screen and therefore there is no scrollbar. I rotate back to potrait, the scrollbar appears, but the scroll doesn't work. If I then refresh the page the scroll works again.
Duplication of the issue:
The scenario can be duplicated with this fiddle: http://jsfiddle.net/v7wvbupd/2/. If you go to this fiddle with an Android product it works perfectly with each rotation. If you do the same with an Apple product you will encounter the bug.
The scroll - with rotations - works fine on all other mobile browsers than Safari.
I have been trying out several things from other posts and other sites but with no success.
What I tried and didn't work:
Setting the postion of body to relativ.
Adding the following: html, body {overflow-x: hidden;}.
Use: -webkit-overflow-scrolling:touch; on the scrollable div.
Adding !important to -webkit-overflow-scrolling:touch; and overflow-x: auto to keep it from being overritten when rotatet.
I have also been looking into some js fixes like adding a timeout on the attribute but still with no results:
<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>
Most of the posts that I have come across are issues where the scroll doesn't work at all. In my situation it works until I rotate from landscape to potrait.
My structure (simplified):
<html>
<body>
<div id="header" class="col-md-12"></div>
<div class="scrollableDiv">
<div id="footer" class="col-md-12"></div>
</body>
</html>
My current CSS:
html {
overflow-y: scroll;
height: 100%;
width:100%;
}
body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}
.col-md-12{
width: 100%;
}
EDIT
My site is using Angularjs as a part of the solution. I just tested if wrapping it within some js was the problem but this had nothing to do with it either. It seems to be a common problem with the Safari only?
I had this troubles with Safari by the past.
So simple things like overflow could become complicated ones.
I suggest you use iScroll.
Definetely the right solution for such a case.
http://cubiq.org/iscroll-5
I have an issue with text inputs on mobile (responsive) site.
I am using next line on css:
body { -webkit-overflow-scrolling: touch ; overflow-y: scroll; }
It's work good, except on inputs. when I fill the form with some text inputs - I can't see the values when I text it, it shows only after scrolling the page or moving to next field (tested on Safari).
i tried to fix it by adding:
input[type="text"] {
-webkit-overflow-scrolling: none !important;
}
But - it didn't fix the issue.
I am using gamby framework.
I just removed next line that I found on CSS file
html, body {
height: 100%;
overflow-x:hidden;
}
I am not sure why this cause the bug, but it works now.
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