bootstrap-multiselect options too long, overruns container - javascript

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:
$(function () {
$("select").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ multiple: false }
);
$("[multiple]").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ enableCaseInsensitiveFiltering: true }
);
});
The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.
How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.

By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:
If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:
The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:
.dropdown-menu>li>a { white-space: nowrap; }
In order to fix this, we can return white-space to it's normal wrapping mode with the following css:
.multiselect-container > li > a { white-space: normal; }
Demo in jsFiddle
Couple more notes:
maxHeight takes the number of pixels, so passing in 5 will make the control only 5px high. You should pass in something like maxHeight: 200
enableCaseInsensitiveFiltering does the same thing as enableFiltering so you don't need both. Decide whether you want case sensitivity or not and then set either one to true
Update with further explanation
#user2105811, You do not need to target the label specifically and you do not need to use !important here's the HTML structure and CSS that is generated for this solution:
Notice that white-space is always inherited from the parent, so targeting label will do the same thing as targeting a, but will address the problem at it's root.
The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed after the bootstrap css which should always be the case. If it's not working, I suspect you are not doing this.

Your suggestion to use:
.multiselect-container > li > a {
white-space: normal;
}
doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.
.multiselect-container > li > a > label{
white-space: normal !important;
}

Related

Alternative to display-toggle when I am not certain that the element uses display:block when visible?

I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.

Run JS function only on screen (not print)?

I have a DIV with long text and truncate it with a function. That is all good, until someone will print the page. The truncated text won't be readable.
Is there some way I can prevent it?
I have looked for an equivalent for CSS's media print, but all I can find works with screen width. I don't know what is better: to truncate only on for media screen or to remove the truncation on 'print'.
// Truncate the job description
$(function() {
if ( $('#jetsSearch').length ) {
$('.job-description').readmore({
speed: 100,
collapsedHeight: 50,
moreLink: 'Read more',
lessLink: 'Less',
});
}
});
I tried this one, but it doesn't work (still truncated)
if ( $('#jetsSearch').length && window.matchMedia("screen").matches) {
It looks like you're using the readmore.js jquery plugin.
This is how I've handled the exact same issue. Readmore.js uses javascript to apply an inline style of height (among other things) to your container. The only way to override those inline styles in your CSS it to use the !important rule in your declaration.
So by adding height: auto; to elements with the data attribute of data-readmore with the important rule, you can override this for print styles (I use a print media query in my CSS for this). I also hide the "read more" link because it's irrelevant to printed pages.
#media print {
[data-readmore] {
height: auto !important;
}
[data-readmore-toggle] {
display: none !important;
}
}

Chosen with width equal to the largest option

I'm trying to make the DropDownList with the JQuery-Chosen in it reacts like all others "normal" DropDownLists, matching the width equal to the largest option on the DDL.
I tried some different approaches to get this done, using css and JQuery, but all I tried became ugly.
At the official page of Chosen, http://harvesthq.github.io/chosen/options.html , it says:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
Any way to workaround this?
Workspace: http://jsfiddle.net/cdtn0ko7/
$('.chosen').chosen({
width: 'auto'
});
Try this out for size. :D
Fiddle
$('.chosen').chosen();
.form-control {
width: auto;
}
Not sure if I got the question right, but since you are using Bootstrap, you can just do something like this on the css:
.chosen-drop {
position: inherit !important;
}
I tried using this following code and it worked, check this out:
$('.chosen').chosen({
width: '100%'
});

Page breaks in SAPUI5

What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}

Even / odd css change using jquery event in sortable

I have set of divs built in php based on the data I load in, and I use sortable for the users to be able to change to order and save it.
To make it more comfortable to use I'd like every second div in set to be of different format.
This code works when I move one "even" div to another "even" position, otherwise when I place "even" div to where "odd" one is it starts to color all between them as "odd".
Code:
$( ".droppable" ).sortable({
update: function( ) {
$(".draggable:nth-child(even)").addClass("even");
$(".draggable:nth-child(odd)").addClass("odd");
}
});
What do I do wrong?
Cheers for help!
What did I do wrong?
You used jQuery.
Use CSS:
.draggable:nth-child(even) {
background: #eee; /* Or whatever you want */
}
I would use CSS pseudo-classes
DEMO http://jsfiddle.net/UAcC7/737/
li:nth-child(odd) {
color: green;
}
li:nth-child(even) {
color: red;
}
Change the order of the addclass statements and check if it makes a difference.

Categories

Resources