How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
Related
JQUERY CODE:
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('#gaga').toggle
})
PUG CODE FOR #gaga element:
p#gaga
| This is `${Value}`
PUG CODE FOR #gaga element:
How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it.
I tried doing it using switch statements but I have failed. Hopefully someone can help.
UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.
Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/
After doing some research I have made some progress... but I am still stuck.
I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code.
Also, if you don't mind is .data() use to assign or get a value.
PS: Got this code from this answer : Fixing toggle with two buttons
and modified it a bit, but I am still not able to achieve my desired result.
If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.
Example: https://jsfiddle.net/Twisty/0x43bf8q/
JavaScript
$(function() {
$("input[type='button']").on('click', toggleOptions)
.first()
.trigger('click');
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$('[name=gender]').val("");
}
});
function toggleOptions() {
var $this = $(this),
onClass = 'button-toggle-on';
$this.toggleClass(onClass)
.siblings('input[type=button]')
.removeClass(onClass);
var gender = $this.filter('.' + onClass).data('gender');
$('[name=gender]').val(gender);
}
function emptyOnDocumentClick(event) {
return !$(event.target).closest("input[type='button']").length;
}
});
Hope that helps.
I'm using Select2 (version 4.0.2) to allow users to select multiple values and make tags of them. The problem is that when the span holding the tags is expanded after new tags are selected, the drop-down values list area is not repositioned accordingly.
This figure shows the Select2 area containing several previously selected values, prior to selecting additional values:
This figure shows what happens after I select one or more choices, which are hidden because the tags area is taller than it was, but the drop-down options list is stuck in the same position:
If I take focus from (blur) the tag area, the drop-down is re-displayed in the proper position to show all of the currently selected values/tags:
Question
How do I get the drop-down options area to dynamically reposition as new tag values are selected? Can I intercept a Select2 event and somehow force it to recalculate the vertical position? Or perhaps blur() then focus() the span each time a selection is chosen?
The solution I came up with was to force the drop-down element to be resized whenever a drop-down choice was selected or de-selected, which required catching the "change" event:
// Apply Select2 to the <select> element
var select2Elem = $("#" + controlID).select2(opts);
// Force drop-down list to resize upon select/unselect
select2Elem.on("change",
function(evt) {
select2Elem.resize();
}
);
I am working with Select2 library (version 4.0.1), but I have strange position of the dropdown of the select. You can see on the image below.
You can see that select2 dropdown overlaps the select area and I can see in the example in the documentation that it should appear at the bottom of the select. Here is my code
<select class="select2">
<option>--Select--</option>
<option>Sample Page</option>
</select>
<script>
jQuery(document).ready(function() {
jQuery('.select2').select2();
});
</script>
Any ideas why this is happening?
In the select2 initialization, add the parent element.
If you are using a jquery modal, do not use the modal ID alone, go a level deeper and keep it as dropdownParent, else it will take the whole screen as its position relatively.
var dropdownParentEl = $('#addModal > .modal-dialog > .modal-content')
selectBoxElem.select2({
dropdownParent: dropdownParentEl,
})
I want my dropdown to be relative within the modal-content, so i kept it as my parent, you change according to its requirement.
I've been trying to create an horizontal radiobutton horizontal list, but somehow I don't get the same visual result as when done with the data-* attributes.
If I do it with code I get squared buttons, while using the attributes I get a nice rounded corner toolbar.
Here is the code I use for creating the button list:
$(element).controlgroup({ mini: true, type: "horizontal" });
which should be the same as the one I use with the data-* attributes:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
I've posted a jsfiddle to show the result
http://jsfiddle.net/simonech/zeDt4/3/
Can someone shad some light on this strange behavior?
Thx
Simone
To make them look the same, try this:
$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");
updated jsFiddle - http://jsfiddle.net/zeDt4/4/
Now, why is this.
I think that jQuery mobile is actually not build upon jQuery UI even though it is currently very close. jQuery mobile is using those data-** attributes to select what is going to be a role of each tag. When the element is added to the html, jqm reads the content and based on what is in these data-role attributes, it decorates / replaces / the current content with its own. This is more about what is done to the element in order how it looks.
On the other hand, when you call
$("#mycontrolbox").controlgroup();
This does create a jQuery component allowing you to use the methods of that component. etc.
This is close to how the component behaves from the script point of view. This does not, however, add data-role attribute to the element itself.
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.