Develop Reference

How to override the CSS !important property when the original file loads after the customized css file

When I looked up this query online, i did see a bunch of results, nothing that suited well with my case. I have a custom style sheet that overrides the original CSS for a datepicker css. Tthe datepikcer.css has a property !important set on the width:
.q-superdate-field {
width: auto !important;
}
I want to re-write the width and add custom width to it, so i did this in my stylesheet:
.q-superdate-field{
width: 150px !important;
}
but unfortunately it does not take my !important as the datepicker.css files loads after my css file and hence takes the last !important property. any ideas how to solve this?thx

You can override an !important with another more specific !important such as targeting a parent of the class.
.q-superdate-wrapper .q-superdate-field {
width: 150px !important;
}
Or any closest class.
.some-closest-class .q-superdate-field {
width: 150px !important;
}
But if you have control over the order I would order custom CSS after any 3rd party libraries.

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%'
});

Modify CSS psuedo selector style in sencha

I am developing a web app in sencha touch. I need to dynamically change the style for one of the class with psuedo element.
Below is my element in the css file..
.testdiv::before{
margin-left: -0.4em;
margin-top: -0.10em;
}
I need to change the margin-top values dynamically in the code as the style needs to be changed in different screens.
I tried
Ext.select(".testdiv").setStyle('margin-top','1em').
But this doesn't apply style to the psuedo element ": before".. How can I do this ?

this is not possible even in jQuery, but I found a solution here: link
you need to add an extra class to your testdiv elements, e.g. on and add a css rule:
.testdiv.on:before {
margin-top: 1em;
}

customize the style for specific jquery-ui dialog box not all the dialogs?

i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.

Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}

If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}

Overwrite auto generated css

I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.
My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%
Is there anyway to remove or overwrite that code with jquery
It's basically adding an inline style to a div with a class called wysiwyg...
so:
<div class="wysiwyg" style="width:320px">
The editor I'm having the trouble with is called: jWYSIWYG
Here's a demo url: http://akzhan.github.com/jwysiwyg/help/examples/

If you want to override inline styles you have two options:
Pure CSS:
.wysiwyg {
width: 120px !important;
}
jQuery:
$(".wysiwyg").css({width:120});
If you want to use styles from somewhere else you can also do:
$(".wysiwyg").css({width:"inherit"});

Reset the width using jQuery:
$('.wysiwyg').css('width', '100%');
Alternatively, you could remove the style attribute altogether:
$('.wysiwyg').removeAttr('style');

Have you tried declaring your own CSS with:
!important
eg.
#textarea-id { width: 300px !important; }

You can either define a new css rule with !important, or use jquery:
$("rule target").width(value);

This should work for you:
$('.wysiwyg').removeAttr("style");
or alternatively you can set the width to 100%
$('.wysiwyg').css("width", "100%");

You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.
Or you can try to create your own slightly modified version of your WYSIWYG JS module.