I need to add a horizontal scroll bar for drop-downs having larger option lengths. We are using Chosen jQuery for these drop-downs.
Below the current code for this:
$(".filterDropdown").chosen({allow_single_deselect: true,search_contains: true});
In the resultant code, I see that chzn-results css is applied which has overflow-x: hidden; property. I don't want to directly change this as it may impact UI elsewhere.
Is there a way to provide overflow-x: auto; style for these drop-downs?
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.
I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.
This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.
Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422
What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.
Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.
just add the position: sticky; in bootstrap-select.css to the below class
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: sticky;
}
<div data-bind="text: title, CSS: {quesHolder: true}"></div>
In CSS File
.quesHolder{
overflow-y: scroll;
}
Now I dont want the disabled scroll to come into view when content in my div is small in length.
However I need scroll only when needed.
Is there anyway to calculate number of characters displayed in div?
Does knockout has some special feature for it?
If you just want the scroll bar to appear when needed, then you can do this in CSS using:
.quesHolder{
overflow-y: auto;
}
Info on MDN: Overflow-y
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;.
How to remove vertical scrollbar in a dropdown?
.someclass { /* or ID */
overflow: hidden;
}
Check this under Windows XP style menu
Many web-sites does not actually use the dropdown (select-option) natively in the code since it is very hard to style it.
They usually use a simulation of dropdown using other element and position absolute divs to mock-up the drop down and then they have full control on the styling.
Look at http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html