need some help to style 2 datepicker on one site in different styles.
Want a different background in the second datepicker...
Tried to wrap the datepicker in seperate div, but doesnt work.
Even <%= Html.Telerik().DatePicker().Name("DatePickerStart").InputHtmlAttributes(new {#class="datepicker2"});%>
doesnt work..
but .InputHtmlAttributes(new { style = "width: 200px;" }) resizes my datepicker.
What do i wrong?
One possible solution is to use the t-animation-container class to modify the css properties.
But exists a better solution, especially when using more datepickers?
Related
I want to add a custom CSS Class to a dijit/layout/ContentPane so I'm able to style it myself.
This is cause I got more than one tab in my TabContainer where my ContentPanes are located and I don't want to double the borders. Using a border all around the Tab will double the border so I removed the left border of the tabs. In the first tab in the TabContainer I need the left border, too.
To get this I tried to assume the first ContentPane a custom CSS class which will do it.
As you see me writing here, I didn't find a way to do this.
I tried it within the data-dojo-props with
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">
So this didn't work. I tried to add it like I do it in a simple HTML element with class="firstTab"
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">
Both ways didn't add my class to the ContentPane.
So how is it done?
The class property is actually not used for that kind of purpose, but it used for identifying of which type the widget is.
However, the class attribute should work, because declarative widgets usually keep their parent attributes. If I have the following HTML:
It eventually gets rendered into:
<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
Hello
</div>
However, please note that when using a dijit/layout/ContentPane inside a dijit/layout/TabContainer a lot of additional CSS is added, possibily overriding your own CSS.
For example, for overriding the background color of a tab inside a dijit/layout/TabContainer, I had to use the following CSS selector:
.dijitTabContainerTop-dijitContentPane.test2 {
background-color: #D4D4D1;
}
Demo: http://jsfiddle.net/Lcog9saj/
But also, be aware that the borders generated by the TabContainer are not applied to the ContentPane itself, but to an element with classname .dijitTabContainerTop-container (part of the TabContainer itself).
If this really doesn't work, then you can always access the domNode property of the widget you're trying to alter, for example:
require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
ready(function() {
domClass.add(registry
.byId("myContentPane")
.get("domNode"), "test2");
});
});
It's that simple that I didn't get it.
All you need to do is adding an ID to the ContentPane.
Dojo generates a widgetID with it like "dijit_layout_TabContainer_0_tablist_myID"
If the TabContainer itself has an ID, it could be different. Just have a look at the generated code.
Now you're able to get it with dijit.byId.
At the end it looks something like:
var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID");
domClass.add(tab.domNode,"myClassName");
domClass is a part of dojo. For using it you just need to require it "dojo/dom-class"
How do you set the height of the Angular UI-Select widget when an item is selected. I have a custom template for the selected item that includes an image and stuff and it gets cut-off.
Is there an option somewhere? I feel like it should expand to fit the template.
I just fixed this by using the css like
.ui-select-choices .item {
height: auto !important
}
and using the !important css function because ui-select has a lot of inline styles and it gets very tedious to fix. If you are using your own template, try not to use the .item class and use something unique like .select-choice-item Next time you might want to provide the structure in the template you're using so we can answer you with a more specific solution.
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.