So I'm completely familiar with overriding a style in bootstrap by using my own Style.css. But let's say that bootstrap has a style that is put on a table or something that is a standard html element. Let's use labels, because it's a rather short example. Let's first assume that there is no other label style or label element styling anywhere else except for the following css code:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
Now if I want to override this style in my Style.css file and change the margin and weight, I could do this:
label {
margin-bottom: 3px;
font-weight: normal;
}
Easy enough, this would change those two items and allow the other styles to cascade through. But what if I wanted to completely remove any styling added by bootstrap for the element label. Is there a short and easy way to do this without having to do something like:
label {
display: inline;
max-width: None;
color: none;
margin-bottom: 0;
font-weight: normal;
}
Or basically going through line by line and changing each styles property to something like none or normal or whatever? All while keeping the original Bootstrap file in an untouched state and not commenting anything out of it.
BTW I would also be fine with using JavaScript if it's concise and easy?
It depends on what browsers you want to support. You could use
label {
all: initial; // or all: unset
}
but be aware that it's not really widely supported yet. It works on IE 11, Firefox, Opera & Chrome, but not Safari or most mobile browsers. Still, a good one to know if and when it becomes more widely supported :)
No if it is already include the only way to override it is to give it properties like none, alternatively the best way to handle it is to use their SASS/LESS implementations and not include the component at all.
Related
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
Is there any way to alias / make custom elements behave like others
E.g. <large> should work like <h1>
There are a few ways to do this, but they reach have their own problems.
Using Classes - This would create the same effect, but isn't what you asked for.
Assigning default h1 values to large like so:
large{font-size:32px;}
This isn't a true alias though, since you have to apply your rules for every alias. This is also problematic, because older versions of IE won't render rules for custom HTML tags, like "large."
Using JavaScript.
Apply no CSS rules to the custom tags, and use JS to generate them. Of course, JavaScript doesn't have universal support, but older browsers should still handle it just fine.
I recomend do class .h1.
large will only looks like h1.
.h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
<large class="h1"> AAA </large>
<h1>AAA</h1>
In CSS:
.stop-p-lf p { display: inline; }
Then in HTML:
<div class="stop-p-lf"><p>This will be inline</p></div><p>And this don't</p>
Let's assume we have this html:
<h2>TITLE</h2>
Is it possible, through the power of CSS alone, to make this either be or behave like:
<h2>T I T L E</h2>
Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.
I already managed to justify the single letters through CSS using these rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.
CSS3 would be ok if there's ok support, JS is not of any help.
UPDATE
letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)
Here's a jsfiddle for fiddling
Why not just use letter-spacing?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
A much easier way to do this would be to use the letter spacing css styling.
for example
h2 {
letter-spacing:10px;
}
Use CSS's letter-spacing:
h2 {
letter-spacing: 2em;
}
jsfiddle demo
While assembling a site, I discovered that it's quite complicated to get buttons work with other elements, so that all elements look all the same.
That happens for example in a menu, where some buttons are real buttons, while other are just HTML links to other pages. Other example may be a form, where buttons are expected to be as large as other inputs.
Please see my jsFiddle to understand what I'm talking about. In the example, I want button to look like other elements!
Some code since SO requests it:
HTML:
Both elements shole be of the same size
<div id="menulike">
<button>DO SOMETHING</button>
GO TO SOMETHING
</div>
CSS:
div#menulike button, div#menulike a {
/*reset some default styles*/
border-style: none;
border-width: 0px;
text-decoration: none;
/*Inline or inline-block*/
display: inline;
display: inline-block;
/*colors and stuff*/
color: white;
font-weight: bold;
background: black;
/*This is important - size is expected to be the same*/
padding: 3px;
margin: 1px;
width: 220px;
font-size: 12pt;
text-align: center;
}
Why does this happen?
The reason your elements do not look the same when applying the same styling is due to default styling applied on elements. This is due to the elements being different. The differences may also be different depending on the browser.
How do you fix this?
You simply need to override all the properties that are different between elements. A lot of the differences between browsers can be solved with CSS resets.
Why isn't my example working?
Regarding your particular issue, the button has different width because you are not overriding all of the button's CSS properties. Try adding the following to your text inputs:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
This should give them all the same width. Alternatively, you can give your button box-sizing: content-box, which is the default for most elements.
As for the difference between the button and link, all I can see is the cursor icon when you hover over them. This can be changed with the cursor property:
cursor: default;
Edit:
I just noticed the second example has different heights for the button and link in Firefox (I was using Chrome before, which didn't show it). I believe this is combination of both height and box-sizing. Setting both to the same value for the elements should give them the same size.
I'm only guessing, but I think the reason height is needed in this case is because the font is treated differently between buttons and links in FF. Since no height was set, the fonts took up different amounts of space in the two elements, even if it was the same font with same font size.
I'm not sure, but the form elements (buttons, select, radio buttons) are provided by the browser. Each browser/OS have an way to show it. So I think you need to write a separated css block for it.
I have a css file with styles:
button-text-only {
padding: .4em 1em;
}
.ui-buttonse {
margin-right: 7px;
}
.ui-datepicker {
left: 2px;
}
... and etc ...
How can I do so that css styles are actualy inside container with id = "date_catr"?
There are a few of ways that I think you can approach this, as has been stated you can prefix the rules with the container ID, e.g.
#date_catr button-text-only {
padding: .4em 1em;
}
#date_catr .ui-buttonse {
margin-right: 7px;
}
#date_catr .ui-datepicker {
left: 2px;
}
etc.
Unfortunately if you have to apply this to 50-100 styles this adds a fair bit of uneeded CSS and may ever so slightly reduce the speed at which the css is applied (which will be more noticeable on mobile devices).
The problem is, apart from the above there are very few ways to actually do what you want.
You could use scoped styles, this sounds like a great idea, until you realise Firefox is literlly the only browser that currently supports this (and by the looks of it, the only browser to support it into the foreseeable future).
You could also try to include your HTML via an iframe, with your intended CSS inline inside said iframe, CSS inside the iframe only applies inside the iframe, and css applied to the page doesn't effect any content inside the iframe. This is basically like the scoped styles solution described above except it has full browser support.
Iframes could however get a bit messy, add unnecessary bloat to the page and be a bit of a pain to maintain.
The only other solution I can think of is prefixing the css and changing it in the css, this means the css doesn't really get much bigger, and also ensures that the speed at which the css is applied shouldn't be effected, this could however be messy and cumbersome to maintain, I'm not sure if you want the elements to inherit base styles from the classes you've posted ... regardless it might look like so:
.i-button-text-only {
padding: .4em 1em;
}
.i-ui-buttonse {
margin-right: 7px;
}
.i-ui-datepicker {
left: 2px;
}
etc.
Personally I'd go for option one, maybe with a class so that you don't have to deal with specificity issues later down the line. You'll end up with a little bit of slowness, but it should be pretty unnoticeable (hopefully)
Prefix every rule above with #date_catr like this:
#date_catr button-text-only {
padding: .4em 1em;
}