I'm using VS and mvc. I have a Html.BeginForm which takes a randomKey as a string in the input box. There is a retrieve button that currently abuts the input box and I just want to add a margin to the button. In the site.css there is a .retrieveButton class but it doesn't seem to override the bootstrap css. Help please!
<div>
#Html.EditorFor(model => model.RandomKey...placeholder = "Enter your 8 digit key" } })
<div class="form-group">
<div>
<input type="submit" value="Retrieve" class="btn btn-default retrieveButton"/>
</div>
</div>
</div>
In case of duplicate class names, the last CSS file wins (it augments or redefines what came before it).
So make sure that your CSS files are added to the page in the correct order. Probably your personal CSS should come after Bootstrap CSS. To do this for MVC 4+, see file App_Start -> BundleConfig.cs.
For more in-depth info about bundling in MVC see e.g. this: http://timgthomas.com/2012/09/a-quick-start-of-asp-net-mvc-4s-bundling/
You can try using !important in the CSS or you can try using a more direct selector.
When you have multiple statements that try to apply the same property to the same element then the statement with the more precise selector will be used.
try:
.form-group > .btn.btn-default.retrieveButton {
}
You can read more about this here:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Related
I already found threads about this topic like these:
How to hide <label for=""> CSS
How to select label for="XYZ" in CSS?
So I thought it's going to be easy, but for now I had no success.
The label I try to reach is this one:
Inside of code snippets I tried the following:
label[for=payment_method_angelleye_ppcp]
.label[for=payment_method_angelleye_ppcp]
label[for="payment_method_angelleye_ppcp"]
.label[for="payment_method_angelleye_ppcp"]
After a couple of Google sessions, I wasn't able to find any other way of writing. It also seems that you don't set a "." in front of it for this case, but I also tried it, of course.
I believe label[for="name"] is the correct format in general...
But it seems something is missing. Inside the label there is a text and an image, but I don't assume that this plays a role in selecting the label?
I put one in CSS and 1 in javascript
document.querySelector('label[for="ABC"]').style.color = 'blue';
label[for="XYZ"] {
color: red
}
<label for="XYZ">XYZ: </label>
<input id="XYZ">
<label for="ABC">XYZ: </label>
<input id="ABC">
Pierre's answer is good, I just want to clarify that label is an HTML element. Unless you have a CSS class "label", you would not be adding a period in front of the selector in CSS.
You're correct, the content (images and text) inside of a label will not affect the selector we're trying to use but there may be other CSS interfering with what you're trying to do.
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I have the following elements I have applied the Bootstrap btn and default-btn classes to:
<input class="btn btn-default add-to-cart-btn" type="submit" name="addcart" value="Add to Cart" />
<div class="btn btn-default enquire-btn" >Enquire</div>
My CSS selectors look like:
.add-to-cart-btn, .enquire-btn {
//CSS
}
However, only the add-to-cart-btn CSS overwrties the Bootstrap CSS.
Would anyone know why this is or if/why Bootstrap has issues with overwriting styles on divs?
Your CSS must be more specific than the css you are trying to overload.
Your are doing .add-to-cart-btn, .enquire-btn.
So bootstrap might be doing "div.enquire-btn". This is more specific than your CSS.
To overload it div.enquire-btn.
I would try making two different classes.
.add-to-cart-btn {...}
.enquire-btn {...}
Your first issue is that for your input class you've spelt "btn-default" incorrectly. So the bootstrap.css for that class isn't being used, which is why your custom code is working for that and not the other.
Without seeing the rest of your document, I can only assume that your custom css is being loaded before the bootstrap stylesheet which is why that is receiving preference. Try making your custom selectors more specific by adding the btn class to them.
eg;
.btn.add-to-cart-btn, .btn.enquire-btn {
//CSS
}
This is quite strange. But I will try to do this instead to see if it's working or not.
input.add-to-cart-btn, div.enquire-btn {
/* Your Style Here */
}
I'm using Rails helper methods to build a form, and using validations.
Whenever one of these validations fails, rails wraps the corresponding inputs and labels in a field_with_errors tag. Which is fine.
However, for some reasons rails is wrapping both the input AND the label in different divs, making styling really hard:
eg:
<div class="field">
<div class="field_with_errors">...label...</div>
<div class="field_with_errors">..input ...</div>
</div>
and what I need is:
<div class="field">
<div class="field_with_errors">...label & input...</div>
</div>
Does anyone know how I would achieve this?
One way is to replace the divs with spans, which don't break formatting as they're not block level elements. To do so, put this somewhere in an initializer:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
"<span class=\"field_with_errors\">#{html_tag}</span>".html_safe
end
Another way would be to simply make the original divs not display as block level elements, with this line in your CSS file:
.field_with_errors { display: inline-block; }
but this is not fully supported by some of the older browsers (looking at you IE6 and 7).
I spotted this (to me) curious css style in the default Site.css file of an ASP.NET MVC project:
.text-box.multi-line
{
height: 6.5em;
}
Is .text-box.multi-line just the name of a class that happens to have a dot in the middle of it, or is this a nesting of two classes? Or is it something else entirely? Can you explain?
And can you provide a usage example?
Edit
Thanks for all the answers. This seems to be an omission from the w3schools css reference page.
it matches an item with both classes, ie.
<textarea class="text-box multi-line"></textarea>
It will not match if the item only has 1 of the classes.
It will match if the item has those two classes plus additional ones.
It means that the element has both classes.
It will select an element with the class text-box that also has the class multi-line
This would be the same:
.multi-line.text-box {}
.text-box[class~="multi-line"] {}
An example:
<p class="multi-line text-box some-other-class"></p>
It's selecting an element like this:
<* class="text-box multi-line"></*>
Any element that has both the text-box and multi-line classes.
It will select this element:
<textarea class="text-box multi-line" />
Or any element with both the text-box and multi-line classes for that matter.
Here's a quick little fiddle to show the difference:
http://jsfiddle.net/sGn2v/
basically it'll match an element having BOTH classes!