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 */
}
Related
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
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/
I have a simple problem here. What I need to do is that I need to place a class after span in a button. Like if:
<button class="test-button">
<span>This is button</span>
</button>
<span class="custom"> I need to place this after Test button using :after </span>
So if its not clear, I need to place the custom class after the span of text-button class. I was trying to accomplish this by using
.test-button span:after {
content:attr([class=".custom"]);
}
but its not working ...
content:attr doesn't work quite like that; it fetches the value of an attribute, rather than setting one (see example). I believe you can't set an attribute in that way - you'll have to apply the individual properties of .custom in the :after declaration manually.
I'm working with primefaces on a screen where I used calendar and autocomplete
I got the UI from the designer and started integration, I assigned styles like this
<p:calendar styleClass="xyz" />
the output is
<span id="bla" class="xyz" >
<input type="text" class="some other classes here" />
</span>
so my styles all fail
Now I need to apply styles on input directly instead of the spans
Can you solve it by rearranging your CSS?:
.xyz input {
/* some weird styling here */
}
This is problematic if you rely on Bootstrap CSS for example. Form controls needs the class form-control, but when you add styleClass="form-control" for p:calendar, the surrounding span gets the class instead of the input, which totally messes with the design. I think there should be a inputStyleClass attribute for the p:calendar tag, the same way there is a tableStyleClass tag for p:dataTable.
This worked for me using jQuery to add the form-control class to the input field:
$(".mycalendar input:first-child").addClass("form-control");
p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />
You can use this trick if you are using material design:
:host /deep/ .ui-inputtext{
/* Your Crazy Custom Style*/
}
i have a submit button with the code inside a form
<li>
<input id="zip" name="zipcode" type="submit"
class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>
.zip-button{
height:30px;
------}
.zip-button:focus,.zip-button:hover{------}
for some reason the zip is not getting any style.but if manually add it in jquery like
$("#zip").css({"height":"30px",...});
its working.As am very new to styling i couldn't figure it.
Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code.
It shows, how the browser interprets the style sheets.
Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.
inline:
<input style='height:30px;' ...
style tag:
<html>
<head>
<style type='text/css'>
.zip-button{ height:30px; }
</style>
...
external file
sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]