In Clarity 2, we used the following code to generate a stack view with nested block headers.
<clr-stack-view>
<clr-stack-block [clrSbExpanded]="true">
<clr-stack-label>Leases</clr-stack-label>
<clr-stack-block [clrSbExpanded]="true">
<clr-stack-label>vApp leases</clr-stack-label>
<clr-stack-content></clr-stack-content>
<clr-stack-block>
<clr-stack-label>Runtime expiry action</clr-stack-label>
<clr-stack-content>Never expires</clr-stack-content>
</clr-stack-block>
<clr-stack-block>
<clr-stack-label>Runtime Expiry Action</clr-stack-label>
<clr-stack-content>Content</clr-stack-content>
</clr-stack-block>
</clr-stack-block>
</clr-stack-block>
</clr-stack-view>
After upgrading to Clarity 3, I'm getting a glitch on my sub header where the right part of it is white instead of the background color.
This seems to be because of the following CSS rule. I can probably workaround it...
.stack-view .stack-children .stack-block-label, .stack-view .stack-children .stack-block-content {
background-color: #fff;
background-color: var(--clr-stack-view-stack-children-stack-block-label-and-content-bg-color, white);
}
The question is whether this a bug? Or was I just using unsupported behavior in Clarity 2? You can play with it here
I can't say whether it's a bug, but the following CSS override fixes it.
.stack-view .stack-children .stack-block-content {
background-color: inherit;
}
Moreover, if I remove that style declaration completely (from dev tools), everything seems to work fine, so it seems like that rule was left there by mistake to try to make sure the clr-stack-content|label was white in the body. Heck if I know...
See https://stackblitz.com/edit/stack-view-nested-header-fixed?file=src%2Findex.html
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I am trying to style my website at mathbymiles.com and I am trying to color some social media link SVG icons in the footer of the website. I used the following code to change the colors to orange:
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
So this gave me this desired result:
HOWEVER, other instances of these svg icons are now orange, too like here, which is undesired:
How can I fix this?
Probably your question does not directly point to a problem. In fact, you need to guess the problem you are experiencing in order to find the problem. People may therefore see it as a question of poor quality.
If we come to the answer to the question,
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
The CSS code you wrote above includes features that predominate by nature to include other icons. See Class Selectors.
Let's rewrite this to affect only the icons below,
.social a.social-link svg.svg-icon
{
color: #FF6C00 !important;
}
Thus, when there is a suitable match, we force it to be orange with "! Important". But if there is no match, we leave it to their natural state. Feel free to write if you have any problems.
Note: Delete the one you added and replace it with the new one above.
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
I'm having a weird bug in Chrome, I'm applying the following CSS rule to an element:
#element {
background-color: #0E0F10;
background-image: url(images/the_background.jpg);
}
Now the first time I open a new page containing "#element", the background image isn't shown until I refresh the page cache with ctrl+f5.
I tried adding Pragma, Expires and Cache-control meta tags and it don't make any difference.
The only way to make the image to be shown at the first time is to put the absolute url in this way:
#element {
background-color: #0E0F10;
background-image: url(http://site.com/images/the_background.jpg);
}
Now the problem is that I can't hardcode a site url, I need to use a relative or relative to the root path.
Looking around I found a dirty trick for fixing a related bug in Chrome that coincidentally also fixs this problem: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
Basically when I open the page the first time, all the background images are reloaded through JavaScript and from here on it works fine.
However I would like to implement a more elegant fix or find the real cause of the problem.
I'll appreciate any advice.
try
background: #0E0F10 url('http://site.com/images/the_background.jpg');
also, be sure to add a width and a height to your selector!
use relative path in style rule solve my problem. such as image url is "http://site.com/images/the_background.jpg", and your css file url is "http://site.com/stylesheet/style.css", use "../images/the_background.jpg" instead of "/images/the_background.jpg" in your style rule.
I happened to run into the same problem just before I believe.
Since you haven't accepted any of the answers. You might want to try, what worked for me:
Instead of:
background-image: url(images/the_background.jpg);
Change it to:
background-image: url('images/the_background.jpg');
With ticks... It seems odd, but it did the trick for me. Since all of my url's also had an underscore, it might be related to this, though I am not sure.
Anyway, putting the url in quotes, should make it work.
See that this is old question. But just faced the same problem. My problem was related with z-index. Increased value for example z-index:2000; and now as if all works. Just need to check z-index for other elements
If your file structure is like this
Main Folder
css
img
index file
then type this syntax:
#element{
background-image: url(../img/example.jpg);
}
Wrtie this code your bug will be solved.
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.