How to set style to kendo-grid-column? - css

I'm use of kendo-grid in my project for many reason.
In one of the cell, I want to set input TextBox like:
<kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column>
As you see, in client, I have bad style
Attention that I never use of any CSS, which want to effect to this.

If you want to set style in kendogrid, you have to override basic css of your selection tag like this:
Image processor > a > span > (your general css class)
Now you have your css that you wanted.

You can use ng-style (I'm using angular 5 and [style] works fo me)
For example:
ng-style="{'background-color':'blue'}"
Learn here:https://docs.angularjs.org/api/ng/directive/ngStyle
<kendo-grid-column field="value" title="{{l('Value')}}" ng-style="{'background-color':'blue'}" width="200"></kendo-grid-column>
EDIT!
According this answer:Kendo UI Grid and ng-style
Use \" \":
ng-style=\"{'background-color':'blue'}\"

You can use Attribute Style
<kendo-grid-column [style]="{'background-color': '#666','color': '#fff','line-height': '1em'}">
</kendo-grid-column>

Actually I don't like to answer my question, but it's better to answer.
If you want to style to that, you have to find one of css class and override that. it's best way to set style to cell-grid
GoodLuck.

You can not set style classes in kendo-grid but you can find kendo classes and override them.

Related

how to add background color to input text if it is a dojo datepicker?

I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.

Is there a css selector based on whether an element has a particular property?

I am working with Magento which doesn't allow for classes on images in the visual editor; so I want to program it to automatically apply right margin to an image if the image has the property float:left ... and visa versa. Is this possible without using javascript?
If it's part of the style attribute, then sure: [style*='float:left']
No, there isn't a selector based on CSS properties, apart from scanning selecting on the style attribute - after all you set them with CSS.
The easiest way would be to set the margin-right property at the same place where you set the float property.
See also:
http://www.w3.org/TR/selectors/#selectors
http://dev.w3.org/csswg/selectors4/#overview
Assuming all of your styles are placed in an external stylesheet the answer's 'not without javascript'.
If, however, you're placing that specific style on the html (inline styles, that is) then what Kolink suggested does work.
Anyway, using javascript(jQuery) here's a possible solution: http://jsfiddle.net/joplomacedo/TECWM/
If you can't see the fiddle, it goes something like this:
if (el.css('float') === 'left') {
el.css({
'margin-left': '50px'
});
}

Applying conditional CSS selectors to magento atrribute

I am trying to do the following:
I have set up a number of Magento attributes for my products & I want to display an icon next to an attribute called "Color" as well as attach an alt tag to this icon/image. My theme has each of the attributes set up as a dt tag, & so the css I am trying to apply is as follows:
dt[foo^="Color:"]{background: url(http://xyz.com/skin/frontend/default/default/images/warning.png) no-repeat 100% 0%;}
and here is the markup:
<div class="white-box-inner">' '<dl class="attribute-list clearfix">``<dt class="first">Size:</dt>``<dd class="first">21</dd> <dt>Manufacturer:</dt>``<dd>Hat Designs</dd>``<dt>Color:</dt>
<dd>Red</dd>``<dt>Fabric</dt> <dd>Felt</dd> </dl> </div>
This however does not display the icon I'd like to appear.
I'm also not sure how to have an alt tag associated with this icon either via css. I'd rather not mess with the template files. Any help is appreciated.
Thanks.
-TM
From your markup it looks like you're trying to select an element by its content. Attribute selectors only select by attributes; they don't select by content.
There was going to be a :contains() pseudo-class, but it was dropped from the spec and so you can't do this using CSS selectors anymore.
jQuery implements :contains(), though, so you could simply use jQuery to add a class and style that class.
Additionally, you cannot associate alt text or a tooltip to a background image in CSS. You're going to have to go through the JavaScript route to achieve this.

Overwrite one css rule with another?

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.

Change property of CSS class in GWT at runtime

I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?
I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none
I'm aware I could loop through the entries, see if an entry is trivial and add a noShow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.
Is this possible in GWT?
Ian
I assume we have a structure similar to the following one
<div>
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
This is how I would solve the problem:
.hideTrivial span.trivial {
display: none;
}
<div class="hideTrivial">
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)
So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.
(This technique can be used with and without GWT.)
AFAIK, javascript can not change the CSS file and have it reapplied. The same goes for GWT (since it compiles down to JS). So, you can not change a CSS rule and have all elements in your DOM reflect the change.
However, you can get a style of a DOM element and change that style. But that is for a particular element. In your case you'd still need to write code to traverses a set of element and make the change.
My suggestion would be to look at gwtQuery (a port, not a wrapper, of jQuery to GWT). It's super-efficient and super-compact. Here is a one-liner to do what you need:
$("span.trivial").hide()
Fot those who need to modify global CSS property values: you can choose StyleInjector for that purpose.
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html

Resources