How do I apply a class to the following so that I can apply a specific css style to it?
The rest of the consist of anchor tags so I can easily apply a class but where do I stick it on this #Html.RenderAction?????
<li>#{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
RenderAction will output a PartialView so I guess your class attribute should be put in the view (the one you call from the method CartSummary in ShoppingCartController) or inside the <li> that call it (maybe with a DIV)
RenderAction does not support passing in an object containing html attributes, like most other MVC helper methods do, so you cannot apply a css class directly using this method. Either you can wrap the output of RenderAction in a div with your css class from the parent view, or you can add a wrapper div to the output of the action itself.
Why u don't want to use Cart (#ViewBag.CartCount)
Be simple.
Related
I am using IAjaxIndicatorAware for a panel containing several elements able to call AJAX. The indicator shows currently under the panel and I need to change its position - how should I do that?
If you use IAjaxIndicatorAware then you have a Wicket Component that implements IAjaxIndicatorAware. In that case Wicket just makes the HTML element with id == IAjaxIndicatorAware#getAjaxIndicatorMarkupId visible by using jQuery.show($('#indicatorId')). This HTML element is placed by you somewhere in your page so you have full control on it. For example you can add CSS rule like:
#indicatorId {
// padding: ...
// margin: ...
}
But if you use org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender then you should use the CSS class returned by org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender#getSpanClass() as a CSS selector.
I want to set a class active on a div (part of a component) if a variable is true (workspace.active here) AND an ancestor element has class .home.
Something like:
<div [ngClass]="{'active': workspace.active && ':host-context(.home)', }">
Can I use somehow this pseudo selector :host-context in such an conditional expression for ngClass ?
Details:
I want to use same component in two use cases. Only some css properties should be different on the two cases. So I want to customize a css class set on a div on my component based on decision: "there is an ancestor home in the dom tree or not" - this should differentiate the two use cases.
I could do things like this in css:
:host-context(.home) .active {
background-color: #405976;
}
but then all selector combinations containing .active class should be combined also with :host-context and I I don't want to grow the complexity in css as it is already complex.
I would prefer to just set the class .active based on the condition. In css file !, not in code. (This is why :host-context exists in the end.)
In angular you should not make any logical decisions in the code based on the html content properties such as classes or attributes, but vice versa - you should render classes and attributes in html based on data bindings. That's the main idea of angular - rendering view based on data bindings. Component's code should not really care too much about view structure.
So, in this case if your class should be based on some external information you need to #Import() that data through data bindings into your component and then use component properties in the ngClass directive. Yes, it moves logic into the component instead of html/css, but that's where it's supposed to be anyway: in the model/controller code, not in the view markup. Also, this way it will be much more convenient to test such a component.
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"
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: div id VS. div class
I am new to CSS and have general question: how do you decide wether it is better to use class selector or id selector?
The answers on this page are all good, but approach the difference from a more pragmatic point of view. Let me try an explain it to you from another point of view. The id you use when you define a conceptual entity of your page, for example a list of something, or a page footer or a navigational menu. Something of which you generally have merely one, as another wouldn't make sense or would be another type of entity. When you have a pattern of repeating entities, or element which serve the same purpose you tend to assign them a class, think about section headers, photos in a gallery etc. So the items in the previously mentioned list would all be assigned the same class name.
Note though, that merely for styling reasons you could do with just classes, never use a single id, and be perfectly fine. It doesn't matter whether your class is used just once, or many times.
From the W3C standards an id should only be used once on a page, while a class can be used multiple times.
"ID" definition from http://www.w3schools.com/tags/att_standard_id.asp
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or
by CSS to make changes or style the element with the specified id.
"Class" definition from http://www.w3schools.com/tags/att_standard_class.asp:
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes
to HTML elements with a specified class.
Since an id should be unique on the page it is also accessed A LOT faster through javascript
Id must be unique, class is not. So it depends on how you want to section the page.
id identifies uniquely an element, so you use it when you have only one element with it (ex ...
the class is applied to a group of elements with same features.
best practice says id is unique in the whole html page
ID's should be used for single elements:
<table id="specialtable">
Classes should be used for multiple elements:
<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->
It's good to use an id when you only have one item that you need to style for. Ex:
<div id = 'myDiv>Text</div>
#myDiv
{
display: block;
}
But when you have multiple items that you want to style the same way (say on multiple pages with css file for example) it is faster (and better) to use a class
<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>
.MyDiv
{
color: black;
}
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