Is it possible to style the combo box container using the Select2 jQuery plugin? I can successfully style the dropdown menu where autocomplete selections appear, but not the container where text is entered. Here's what I'm doing:
$(document).ready(function() {
$("#combo").select2({
data:[{id:0,text:'One'},{id:1,text:'Two'}],
multiple: true,
createSearchChoice: function (term) {
return { id: term, text: term };
},
containerCss: 'container',
dropdownCssClass: 'dropdown',
containerCss: {
background: 'green'
}
});
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
background: green;
}
.container {
background: green;
}
.dropdown {
background: red;
}
The container should be green, but it's not. Here's a fiddle.
Edit:
I noticed on the documentation page for the site (which is quite comprehensive) that every example of the kind I'm trying to do (hidden input field with dynamically loaded options) has the same standard style, like in my example fiddle. The version that originates from a select element, however, has rounded corners etc. If this means you can't style the container when using a hidden input, it's seems like an odd limitation.
Edit2:
#emmanuel has already provided a solution, but since I was actually after the border-radius, there was a bit more to do to get it working properly. After setting the radius on all corners, opening the dropdown results in rounded corners visible between the top of the dropdown and the bottom of the container, which is a bit ugly. You can do something like this to fix it:
$('ul.select2-choices').on("select2-open", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
});
});
$('ul.select2-choices').on("select2-close", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '5px', // or whatever
'border-bottom-right-radius': '5px', // or whatever
});
});
I think this will cause a problem, though, for any other Select2 combo boxes visible on the same page.
In order to add background color to container you have to put the rule to #s2id_combo. The problem is that ul.select2-choices already has a background and it's over container so you have to add:
ul.select2-choices { background: green !important; }
Related
What I need :
I am trying to create tags on the click of a button. I was successful with my attempt to create divs on the click.
Problems :
As in all the websites one has seen, like in stack-overflow or when you write email addresses , as you finish writing the text a "tag" is formed with a "remove" button when you hover.
Now I want something like this, but I am confused in how to show that cross on the divs.
Also my problem is when I use elements, I am also giving some background color but that is static. And if the text grows then there is no background color on the part of the text.
How should I go about this problem ?
This is what I have tried so far : http://jsfiddle.net/abhighosh18/wk9uxfz5/1/
JS :
$('.btnAdd').on('click', function () {
$('<div/>', {
id: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val()
}).css({
fontWeight: 700,
width : '30px',
background : 'lightblue',
padding: '2px',
margin: '5px',
float : 'left'
}).appendTo("#content");
});
$('#newCo').on('click',function(){
$(this).remove();
});
Some illumination --
$('#newCo').on('click',function(){
$(this).remove();
});
The above won't work because the #newCo element does not exist at the time that line executes.
$(document).on('click','#newCo',function(){ $(this).remove(); });
This refactored line of code listens to the document and WILL work on elements that don't exist at the time the DOM is first loaded. However, ID is not what you want to use here... because IDs need to be unique and there would quickly be several div withs the same ID if you click the .btnAdd element.
There are many ways to accomplish what you want, I just wanted to illustrate why your approach is failing.
THE FIX: you could chain .addClass("removable-tag") within your div-creating click function (before .appendTo()), and listen to $(document).on('click','.removable-tag',function(){...});, and THAT would function as intended.
You can use display: inline-block css property and min-width instead of width:
$('.btnAdd').on('click', function () {
$('<div/>', {
id: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val()
}).css({
fontWeight: 700,
minWidth : '30px',
background : 'lightblue',
padding: '2px',
margin: '5px',
display: 'inline-block'
}).appendTo("#content");
});
http://jsfiddle.net/Lathtqd8/
NOTE: What follow is an answer to this part of question ( before update ) :
Now what I need is the CSS for the divs to be placed side-by-side. I
have seen the code for doing so, but I need to know how to write the
code for dynamically generated divs.
Another thing i tried was creating buttons instead of divs. That
placed my buttons side by side without any extra effort from CSS.
add this to your css :
#newCo {
float: left;
}
and remove the forcing width : '30px', from your JS code otherwise it will get broken on large content.
http://jsfiddle.net/tunecino/wk9uxfz5/5/
Add some class not id when you want to add multiple elements.
snippet added
--joy
//javascript
$('.btnAdd').on('click', function () {
$('<div/>', {
class: 'newCo',
title: $("#prodName").val(),
text: $("#prodName").val(),
'data-idn':'some_unique_number'
}).append('<a>x</a>')
.appendTo("#content")
.find('a').click(function(){
var idn = $(this).parent().data('idn');
$(this).parent().remove();
//removeCallback(idn); //call anything with idn if required
});
});
/*CSS*/
.newCo{float:left;min-width:30px;background:lightblue;font-weight:700;padding:2px;margin:5px;}
.newCo > a {cursor:pointer;margin:0 0 0 3px;border-radius:50%;color:red;padding:0;text-shadow:0px 0px 1px #fff;font-weight:200;font-size:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Product Name:<input id="prodName" type="text">
<button class="btnAdd" value="Click Me!">Add Product</button>
<br/><br/><br/><div id="content" height="100px" width="100px" style="color:blue"></div>
try this:
$("#mydiv").off('click');
I'm wondering how to bring attention to a section that has more information than is showed on the screen. Essentially, the way it currently looks, it might only appear that there is one piece of data in the table, but in reality there is a scroll window. I'd like to bring attention to the fact that there is more data, you just need to scroll. I added the border and that at least started to help.
http://jsfiddle.net/xG3uc/
How would you highlight that there is more data but you just need to scroll to see it?
.but_there_is_more {
max-height: 50px;
overflow-y: auto;
border: 1px dotted #ccc;
}
Maybe if the div expands over the max-height, have some javascript to show a link to "expand" the rest?
Want to try qTip2? Check DEMO http://jsfiddle.net/yeyene/xG3uc/10/
JQUERY
$(document).ready(function(){
$('.a')
.qtip({
content: {
text: 'Scroll for more data!'
},
position: {
my: 'bottom right',
at: 'bottom right'
},
show: {
event: 'mouseover',
ready: true // show the tooltip when ready
},
hide: {
event: 'click unfocus' // click anywhere to hide
},
style: {
classes: 'ui-tooltip-red'
}
});
});
Source and Doc of qTip2 http://craigsworks.com/projects/qtip2/demos/
I have a div box, with a lot of p tags in side, and it is getting very long.
So I added on the top of the box, a show more text.
The box have a height: 100px; overflow: hidden;, but then when someone click on show more, I would like it to slideDown the box, to get the normal height, which it would have had if height: 100px; was not set.
Any idea how to do this?
I tried the following: (Note, the box have class .show-limited-content and the show more have class .show-more)
$('.show-more').live("click", function() {
$('.show-more').live("click", function() {
$('.show-limited-content').slideDown("slow");
});
return false;
});
You could use the animate method.
It would look something like the following, depending on how your html is written:
$('.show-more').on("click", function() {
$('.show-limited-content').animate({
height: '500px'
}, 2000);
return false;
});
See this working example to see it in action.
If you need the height dynamically, just add
var curHeight = $('.show-limited-content').height();
$('.show-limited-content').css('height', 'auto');
var autoHeight = $('.show-limited-content').height();
$('.show-limited-content').height(curHeight);
above the event handler and change the animate css to
height: autoHeight
Here is another example.
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
No CSS setting helped and no higher z-index setting helped either.
Here is my example... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
Thank you.
This css helped me:
.highcharts-container { overflow: visible !important; }
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
Here is what I did and what I suggest everyone to try:
Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:
tooltip: {
useHTML: true
}
Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.
Adding simply this CSS worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
I recently got the same problem, but with bootstrap container ! (bs3)
None of those solutions worked but I found by my own.
Its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
So add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
Tooltip options:
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
None of the solutions worked for me. When the tooltip was bigger than the chart it simply didn't show.
Eventually we realized that Highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
After that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
And make sure to set the z-index higher in the container if you're having any problems.
I would just like to add an example and prove that .highcharts-tooltip-box
doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
Demo:
https://jsfiddle.net/BlackLabel/3fubr1av/
I've got a scrollable div with rows (and hidden rows). Clicking on one of the rows causes the next hidden sibling to show.
In Firefox, however, clicking on a row causes the scrollable div to jump back up to the top, and only the first time. Scroll back down and click a row, and the scrollbar stays where it is.
IE and Chrome do not reset the scrollbar, which is extra frustrating.
http://jsfiddle.net/xyan/TH4X3/
HTML:
The HTML is lengthy for the purposes of having enough information to have a scrollbar. Because of its length, I won't post it here.
Javascript:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
if ($(this).next('tr').is(':visible')) {
$(this).find('td.details').removeClass('collapse').addClass('expand');
$(this).removeClass('current');
$(this).next('tr').hide();
} else {
$(this).find('td.details').removeClass('expand').addClass('collapse');
$(this).addClass('current');
$(this).next('tr').show();
}
return false;
});
trackingresults.container.delegate('tr:not(.history)', 'hover', function() {
if ($(this).find('td.details').hasClass('hover')) {
$(this).find('td').removeClass('hover');
} else {
$(this).find('td').addClass('hover');
}
return false;
});
One of the "Similar Questions" links suggested this problem. This seems similar, but might be different enough to warrant this question.
Is there something I can do to prevent the jumping?
I refactored your code a bit and the problem went away: http://jsfiddle.net/TH4X3/6/
You don't need the .hover() handler or the .hover class, just do it in css via :hover. Replace this selector: #test-shipments td.hover with this:
#test-shipments tr.current, #test-shipments tr:hover td {
background-color: #B1C3C4;
}
You don't need a .collapsed class - just make that the default and let .expanded override the defaults.
Rather than showing and hiding the next row explicitly, just use css to do it, based on the previous siblings .expanded class. Use the adjacent sibling selector - +:
#test-shipments tr.expand + tr.history {
display: table-row;
}
With just those css tweaks* you can reduce your JavaScript to just this:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
$(this).toggleClass("expand");
});
And as a side-effect, your firefox scrolling issue goes away!
* Plus a couple of IE7 hacks, see the jsFiddle