I am currently using CodeMirror to edit CODE in text area in browser. If i have more than 20 lines of code, it is adding a vertical scroll bar to right. But i do not need this scroll bar. Instead i need the editor size to grow vertically.
Can anyone help ?
In CodeMirror 3, there is an option to disable the scrollbars : scrollbarStyle: "null"
From the documentation :
scrollbarStyle: string
Chooses a scrollbar implementation. The default is "native", showing native scrollbars. The core library also provides the "null" style, which completely hides the scrollbars. Addons can implement additional scrollbar models.
Combining this with :
automatic height: height: auto & viewportMargin: Infinity (Example: http://codemirror.net/demo/resize.html)
wrapping lines: lineWrapping: true
And then controlling the height/width of the parent div works well
The CodeMirror doco talks about a style CodeMirror-scroll which controls whether a scrollbar appears, and whether the textarea expands to fit the content. Specifically it says:
CodeMirror-scroll
Whether the editor scrolls (overflow: auto + fixed height). By default, it does. Setting the CodeMirror class to have height: auto and giving this class overflow-x: auto; overflow-y: hidden; will cause the editor to resize to fit its content.
Thus the idea is to add to your own CSS something like:
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}
as illustrated here in the official demo that accompanies the documentation on the style CodeMirror-scroll.
What worked for me:
For my personal situation using CodeMirror 2.34 all I did was add the following style to my own stylesheet:
div.CodeMirror-scroll { height: auto!important; overflow: visible; }
CodeMirror 3:
In my brief initial testing of CodeMirror 3, both the above techniques didn't work and I still got the scrollbars. Interesting, since you'd think the official doco on subject would be valid - unless CodeMirror 3 has changed its styles a bit and the doco hasn't caught up yet...
For me wrapping codemirror textarea on an element with display:flex, fixed the unwanted horizontal scroll issue:
<div style='display: flex'>
<textarea></textarea>
</div>
<script>
//codemirror setup
</script>
Related
I'm using PrimeNG TabView, i have enabled vertical scrolling inside the tab content, the problem is that when I change tab, the content horizontal position is the same as the previous. I'm only using JS/TS, CSS, HTML, PrimeNG for the tabs and Ionic Framework.
I want the content of the new selected tab to be at the initial state, "unscrolled"
#FabianStrathaus It is more efficient to look directly at the code in this official documentation, it is what I used, plus however I added this CSS:
:host ::ng-deep .p-tabview-panels {
height: 38vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0px;
}
looking at the documentation again I maybe figured out what the problem might be, I set horizontal scrolling to p-tabview-panels, maybe I should have set it to p-tabview-panel, the differences:
p-tabview-panels are the Container panels.
p-tabview-panel is the Content of a tab.
For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated
By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag
we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}
In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)
e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem
I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)
pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;
Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript