We Keep Coding

Vue multiselect show always behind Bootstrap input groups

I'm having a really hard time with this.
I'm using Vue Multiselect and Bootstrap's 3 Input Groups.
The problem here is that the multiselect options show behind the input group no matter what z-index I use on it. I know that I can change input group z-index to 0, but watching Bootstrap SASS files it says: "Ensure that the input is always above the appended addon button for proper border colors" so I don't know if it is safe to do this:
.input-group .form-control {
z-index: 0;
}
I tried every selector on the multiselect but none makes effect. Any help would be appreciated.
Here is the fiddle: https://jsfiddle.net/cristiancastrodc/c9gdxg3s/

It looks like the cause of this is that in the vue-multiselect.min.css file that defines these stylings, .multiselect--active only has a z-index of 1. Clicking the multiselect dropdown toggles that active class.
Changing the z-index on .multiselect--active to something greater than 2, which is the value for the input box, would probably be the best way to solve this issue.
I've put this updated solution in a new fiddle.

Try
.input-group {
z-index: -1;
}

How do I disable "last pressed" Button state in Bootstrap?

I'm using Bootstrap Button component in my React application.
The default Button has a special appearance after it was pressed and the mouse cursor is already out of it:
This appearance is changed to normal after any click. How do I disable this feature without disturbing any other states (pressed, mouse over, normal) of Bootstrap Button?

I think you are referring to the blue border. This is the outline on the :focus state.
try this in your css:
.btn:focus {
outline:none;
}
for colour try (success btn example):
.btn-success:focus {
background-color: #5cb85c;
border-color: #4cae4c;
}

Hiding the focus state of buttons is a bad idea. Hitting the space/enter key whilst a clickable element has focus is the same as clicking it. A user should be able tonknow that. You're better off using script to blur() it or move focus to another element.

In addition to the #Brad response, maybe you can try to switch the class of the button after click with other of the button clases from bootstrap.
Check the Bootstrap Button documentation

How to turn off css:hover for kendo grid (.k-grid tr:hover) without modifying the kendo css?

I have a kendo grid on Cordova app. Here on the grid, the scrolling is jagged due to the css rule 'k-grid tr:hover' in kendo css. If I disable this rule from developer tools, scrolling is smooth. Is there any way to disable this hover rule?
I don't want to override hover behaviour. I want to disable it.
Edit: The problem is due to hover the scrolling is not smooth on the grid. The scroll starts after touchend of the swipe but instead it should move with touchmove. This causes the scrolling to be jagged. Removing the hover rule solves this and makes scroll smooth.
Do ask for further clarification if necessary.

You can use pointer-events: none property on the DOM element.
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
.k-grid tr {
pointer-events: none;
}
With this property, the hover event on that element will be completely ignored.

I've "solved" it by disabling the hover and then replicating the tr even background color:
.k-grid tr:hover {
background: none;
}
.k-grid tr.k-alt:hover {
background: none;
}
.k-grid tr.k-alt:nth-child(even) {
background-color: #f5f5f5;
}
of course you can play with the colors

I took hint from Gabriel's answer but I applied pointer events none to the td elements inside .k-grid tr. But this is just a temporary fix as this removes the possibility of adding pointer events to those td elements. I am still looking for a better alternative.

jQuery spinner button won't style active state

I'm trying to style the active state of jQuery spinner buttons like this:
.ui-spinner .ui-spinner-button:hover {
background: #FF0;
}
.ui-spinner .ui-spinner-button:active{
background: #0FF;
}
Hover is working, but active is not. See jsfiddle example here.
Please excuse the ugly colors - just have those for simplicity's sake.
Update: the issue is primarily in Firefox - it doesn't present itself in Chrome

I dont know how to do it in css tried some options but they dont work but i managed to solve it in jquery give it a try
$(".ui-spinner .ui-spinner-button").click(function(){
//background you want to be in active state
$(this).css("background","#111");
//reverse the background in 0.1 second
setTimeout(function(){
$(".ui-spinner .ui-spinner-button").css("background","#fff");
}, 100);
});
it works both in firefox and chrome, but you should remove the :active from css since it's going to work in chrome and you will get a mix of active state with the color specified in css and the one in jquery

It looks like jQuery's background image is taking precedence over background color in Firefox. Try this:
.ui-spinner .ui-spinner-button:hover {
background-color: #FF0;
background-image:none;
}
.ui-spinner .ui-spinner-button:active{
background-color: #0FF;
background-image:none;
}

Just replace :active pseudo-selector by :focus. See here: http://jsfiddle.net/xvWG5/92/
PD: I also replaced type="submit" by type="button" so I stay on the page.
Your new fiddle get fixed the same way. Checked: http://jsfiddle.net/xyb9fr35/2/
Same thing: replace :active by :focusand use #testSpinner as a selector instead of the class because that class is not in the DOM when the css is applied.

How to change background color of jQuery UI Dialog?

I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?

you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​

Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.

If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});

Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}

Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...

Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.