How to disable or hide scroll bar in textarea
This will hide all scrollbars for textareas.
textarea {
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one:
textarea#txt {
overflow:hidden;
}
Keep in mind that these are HIGHLY unrecommended! If a user tries to type more than will fit inside your textarea they will not be able to see what they are writing. You have no idea how much people might want to write in a form.
Use
overflow:hidden for the textarea.
See The overflow declaration
HTML
<textarea id="txtArea" rows="10" cols="20"></textarea>
CSS
#txtArea { overflow: hidden; }
By doing this the user won't be able to view the text that is overflown. So better to make overflow: auto. This shows scrollbar where necessary.
Hiding the extra text is not recommended.. Why don't you try using jquery plugins for auto height textarea according to user input... Find below few links to scripts ...
Auto Height
Auto Resize
To hide it completely, use the following CSS:
overflow:hidden;
If all you are trying to do is remove the scrollbar showing on an empty text area but want to preserve the ability to scroll for larger blocks of text, then use:
overflow:auto;
Sorted.
Related
I have given a link for it
https://jsfiddle.net/Sydney_o9/66uqd12s/7/
#my-popover {
overflow:hidden;
}
I need to give overflow:hidden to wrap the contents inside my popover.So how can i wrap the contents in popover without making arrow hidden.
If anyone knows please do help.
Thanks in advance!
Add overflow:hidden to the CSS class .popover-content instead, as follows:
.popover-content {
overflow:hidden;
}
This way the arrow will not be influenced, just the text inside the popover body.
Updated your fiddle: https://jsfiddle.net/66uqd12s/174/
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
For some reason, the styling of my scrollbars changed.
I did not change any of the overflow styling (I am using overflow-y: scroll for my divs).
The scrollbar used to disappear when the div was not being scrolled, similar to the scrollbars used in the Facebook chat.
Now it has this static border and the scroll bar does not disappear:
I am using Chrome as my browser.
You can some some javascript which detects when user scroll then show scroll bar
here is a snippet
function scroll(e){
e.target.style.overflow='scroll';
}
function noscroll(e){
e.target.style.overflow='hidden';
}
document.getElementById('div').onwheel=scroll;
document.getElementById('div').onmouseout=noscroll;
div {
width:200px;
height:100px;
border:solid black;
overflow-y: hidden;
}
<div id="div">
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
</div>
If you want the scroll bar to appear only when there is something to scroll in, use overflow: auto instead of overflow: scroll
One way is to create a custom scroll pane. Then it is easy to set the opacity of the scrollbar to zero when the mouse leaves it, something like
scrollpane.onwheel = function(){
scrollbar.style.opacity = 1;
};
scrollpane.onmouseout = function(){
scrollbar.style.opacity = 0;
}
Another way would be to hide the scrollbar with another element on top of it. You can create an outer div with overflow:hidden and an inner div with overflow:scroll. Then set absolute sizes for both divs and make the inner div about 20px bigger than the outer div. This should hide the scrollbar.
I'd like to add that it's hard to answer such a vague question. It would have been easier if you wrote your code into your question.
EDIT:
I have created a working jsfiddle with a custom scrollbar.
Custom scrollbars are a bit difficult because many events are involved, and they work differently in different browsers. For example, it might not work well on mobile devices. I have disabled text selection during dragging the slider, but this doesn't work the same on all browsers.
I even managed to prevent scrolling on the page while the cursor is in the custom scroll pane.
I hope that this meets your expectations!
Aloso
I have a website which contains a large (and wide) table. The table is placed inside jquery UI tabs.
It looks something like this: http://jsfiddle.net/Tq3Rg/
For the user this can be somewhat annoying since he has to go all the way to the bottom of the table and page to scroll right.
Is it possible to make the scrollbar always appear fixed on the bottom of the page?
Set a fixed height (and don't use inline-styles):
Your altered Demo
the code:
.top{
height:10%;
}
.center{
overflow:scroll;
height:80%;
}
.bottom{
height:10%;
}
If you really want to have the scrollbars at the very bottom of your page, you could check this answer on how to achieve this without needing custom scrollbars and such stuff.
Just set some fixed height to your middle div
like
<div style="background:white;overflow-y:scroll;height:400px;">
You need a custom scrollbar to do this, have a look http://baijs.nl/tinyscrollbar/ or http://www.jquery4u.com/plugins/10-jquery-custom-scrollbar-plugins/#.T_RSYxEe4hU.
I have a DIV on my page. Within the DIV I have other DIVs which I customize to look like buttons. Here's an example:
fiddle
Because I have so many buttons I need to have some means of scrolling so that the user can scroll down to the correct button (DIV). In the fiddle this is done using an iframe but I think I read that this can give problems with search engine optimization.
Is there some way that I can add a scroll bar to my DIV? I have never seen this done but I hope someone has some ideas.
Thanks,
You could do something like this:
Add
padding-right:30px; overflow:auto; height:500px;
to the main div
http://jsfiddle.net/jasongennaro/AQ7Ev/7/
You will need to set a height to make it work.
Also, you will need padding so the scroll bar does not overlap the content.
If you're willing to use some JQuery, JScroll Pane plugin is exactly what you're looking for
set the height for the containing div + overflow:auto or : scroll
<div style="width: 200px; height:240px;overflow:auto">
<div class = "abc" >.....
You need to set a height on the div and add overflow:auto;. I forked your fiddle, here's the code: http://jsfiddle.net/vxTqT/.