How to include multiple Css Class in ActionLink?
Tags: c#,css,asp.net-mvc
Problem :
Let's say I have two Css class like below:
.btn
{
border:1px solid yellow;
}
.btn-info
{
background-color: blue;
}
and an ActionLink
:
<li>@Html.ActionLink("Home", "Index", "Home", new { @class = "btn btn-info" })</li>
As you can see I included those css class in ActionLink
classes but it takes only first one. How should I add second one to ActionLink
Css classes.
Generated Html:
<a class="btn btn-info" href="/"></a>
Solution :
<li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "btn btn-info" })</li>
The fourth parameter is for the routeValues
and the fifth parameter is for htmlAttributes
.
CSS Howto..
In your case you could treat the inner div witin a div as a child and as a result you can use this css #container #text2 { /* Unique Div...
From looking at the source I think it's more something like this: http://jsfiddle.net/WZm9Z/ html: <div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div> CSS: .image-block { width: 100%; height: 80px; } ...
There's really nothing wrong with wrapping elements in a div in order to achieve a certain layout. In fact, a div is a generic container which is meant to group...
As per my comment, I think the best element for the job is an ordered list.. <ol> <li><span>Entry one<br>text on another line</span></li> <li><span>Entry two</span></li> <li><span>Entry three</span></li> <li><span>Entry...
Apply it to loadingprogress, the one you're animating, instead of its parent $("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){ window.location.href = "http://www.google.com"; }); Updated jsFiddle...
You could try using overflow-y: scroll; See http://jsfiddle.net/4CCfy/...
Unfortunately, what you're describing is strictly not possible with CSS selectors. The :nth-child selector (like :nth-of-type) only operates within the context of a single isolated group of children (not descendants)....
Circles are becoming oval because of padding property you have applied. just remove padding: 5px 10px; and add float:left; in the circle class. .circle { position: relative; background-color: #3cb371; border-radius:...
Somehow none of the fiddles that were produced work in my IE9 anymore, not even those, that were working before. Since the last posted revision (26) works in Opera, Chrome...
Try adding the following css: li { list-style-type: none; } If that works, then your css selector .product_list is just incorrect and you'll need to specify it in a way...
The page makes it look like a border but it is actually a background image: http://assets.kyan.com/assets/bg_body-371ff50252ac1129efd2aa5d4f4b827b.png Good idea @Joeri Hendrickx =)...
Namespace your editor styles You can add a selector that namespaces your editor and allows you to style it: <div class="editor-style"> <div id="cool-custom-editor">...</div> </div> In your css: .editor-style .icon-thumbs-up {...
CSS rules can be specific, for example: .page-wrapper .inner will apply rules to a specific subset of this css rule: .page-wrapper So you should specify the div which your WYSIWIG...
No css declarative way by now. As far as I know there is no defined format for dictionaries to be used with hyphenate-resource (or @hyphenate-resource) or wide support for it,...
50% opacity IE: filter: alpha(opacity = 50); 50% opacity other browsers: opacity: .5; ...
You need to remove the inline style (style="display:none") from your markup - inline style will override the styles loaded from the stylesheet. Instead, put this in your stylesheet: .c1 >...
When working locally, use http:// instead of the protocol-less // The Google font's aren't loading now... <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&subset=latin%2Clatin-ext' type='text/css' media='all' /> ...
try following (is that what you want): var $containers = $(".fieldContainer"); // First Show the First Element & Focus it $containers.eq(0).fadeIn(500).find("input").focus(); // Setup a transition handler: $containers.find("input").keyup(function(ev) { ev.preventDefault(); ev.stopPropagation();...
For 1200px device, you can create 3 columns of li or div and put the images namely A,G and H in first column; B & C in Middle column; E,F,D,I...
You can try like this: LINK CSS: .sale tr.no_border td { border: 0px !important; } HTML: <tr class="no_border"> <td colspan="3" align="left" valign="top"><h2>Bottles</h2></td> </tr> ...
Working fiddle: http://jsfiddle.net/JkUCQ/4/ (updated based on your new input) Add this to your CSS: .pagerRow tr td:nth-child(1) { width:10% !important; } .pagerRow tr td:nth-child(2) { width:80% !important; } .pagerRow tr...
You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;. Then you let...
This seems like an ideal situation for child selectors. Something along the lines of this though you would likely want to change your <p> to a <div>: .panel-grid-cell, .panel-grid-cell >...
There are some areas that are highlighted in the darker blue colour, but I don't think there's much you can do about that if I'm being honest. It actually looks...
Alright, so there are obviously not a whole lot of people who have tried the .NET 4 menu as of today. Not surprising as the final version was released a...
I did it with pure css in this example using 4 extra divs: If youre worried about overflow you can just wrap it in an extra div. JS FIDDLE css:...
There is a package for this called npm-css In webpack you can require css like require('bootstrap.css'), this is why installing css via npm quite useful if you don't have it,...
As @Andrew said, you need to need to nest your style statements in single quotes. And you must include your expression inside the brackets : <div class="image_wrap" th:style="${student.studentExamStatus ? 'border-style:...
The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice...
When you click on .button-detail the class .answered will be added to .services, click on .button-back and the same class will be removed $('.button-detail').on('click',function(){ $(this).parent().addClass('answered'); }); $('.button-back').on('click',function(){ $(this).parent().removeClass('answered'); }); then...