I am building a mobile site using jquery.mobile-1.0b3.min.css. If I download the css file, I lose some of the effects and icons from the theme I'm using. But I need to override some styling in that file even though it's hosted at jquerymobile.com.
The style I need to override is ui-select. The width attribute of this style is width: 60%, but I need to remove that style altogether while leaving the rest intact.
.ui-select {
width: 60%;
display: inline-block;
}
Is there a way to remove width: 60%; without effecting display: inline-block;?
You can add your own stylesheet that overrides any previous styles. (Just make sure your custom stylesheet loads after the jQuery stylesheet.)
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
Right now I'm making nicely formatted CSS files for our temporary WordPress site, until the new site is ready. After making a CSS style sheet and pretty HTML files, I found they didn't work in WordPress if they were inline in a post, but instead I had to put them in a separate raw HTML file (using "WP File Manager" plugin to upload them to a separate folder.) After that, the way they display on the site matched what they look like on my HDD or on my personal (LAMP) test site (using Safari 10.1.1 OS X), and if I display source in my browser it looks identical to what I uploaded.
Then I created a tooltip style with CSS following the tutorial on w3schools. In the style sheet I define "edit" as a style for changes I made to the original text
.edit { /* changes made, */
color: navy;
position: relative;
display: inline-block;
}
.edit .tooltip {
font-size: medium;
visibility: hidden;
background-color: navy;
color: white;
text-align: center;
width: 20em;
padding: 0.5em;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.edit:hover .tooltip{
visibility: visible;
}
Then (per the tutorial) I add "tooltip" text inside "edit" text
<h5 class="edit">ΒΆ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>
On my HDD and my personal site, the tooltip is invisible until I hover over it and then it pops up a balloon.
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored. To work around this bug for now (so I don't have to re-edit the HTML files), I was able to disable and hide all the tooltips by defining the tooltip style as
.edit .tooltip {
visibility: hidden;
font-size: 0%;
}
This suggests that the "tooltip" is being seen, but some aspect of the hidden part is being parsed differently on WordPress.com.
So is there some CSS style or property that WordPress could be using that causes my text to be shown? Any way to pre-emptively override this with CSS? Should I write a JavaScript that goes through and manually hides the tooltips?
Any experiments I should try to make it go away?
PS: This is different than the question at CSS Tooltip will not work on WordPress page because my text is shown inline.
You are saying:
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored.
This is an indication that the file with the styles for tooltip is loaded before other css styles are loaded. Thus files that load last override what's been loaded before.
For debugging, try adding !important to your tooltip style rules like this:
.edit .tooltip {
visibility: hidden !important;
font-size: 0%;
}
and see if that makes any changes.
Then, modify your WordPress files so that your tooltip styles are loaded last. That will allow you to remove the !important flag. (because using that flag is not a best practice and should be avoided whenever possible)
I use a react big calendar in sharePoint web part. So this styles from external css of big calendar hide my month calendar:
.rbc-month-row {
display: flex;
overflow: hidden;
}
and I get the following picture:
so when I disable this styles from chrome it's okay:
I try to disable this styles from my own css but it's doesn't work:
.rbc-month-row {
overflow: visible !important;
display: block !important;
}
So how I can disable this styles by other ways?
the solution is to change flex-basis property to auto like this:
flex-basis: auto;
Here you need to make sure that your css is included after the react big calendar css file like as below.
example :
1. react big calendar.css
2. <custom.css>.
If this is way then it will worked and make sure that other style may not affecting this classes.
I have a small problem and I'm not sure there is a real way to do what I want easily.
I have multiple stylesheets available:
a Bootstrap stylesheet is loaded first
Multiple modules are loaded
In one module, there is a rule like this:
.container .container {
padding-left: 0px;
padding-right: 0px;
width: auto;
}
This effectively prevent me from using stacked containers in my layout. I'd like to disable this rule.
I can technically override it before or after it is declared but I don't want to reset the styles... Let say I just want this rule to cease to "work".
I tried to override it with:
.container .container {
padding-left: inherit !important;
padding-right: inherit !important;
width: inherit !important;
}
But that doesn't work. What I'd like to achieve is effectively disable a style in the stylesheet chain since the bootstrap has multiple styles with media queries, it could be a bit complicated to reapply the bootstrap styles for the container after the css stylesheet that breaks my styles is loaded.
As far as I know there is no way to do that other than reapplying the styles.