Looking for a solution to remove the track from the FluentUI Progress bar, but limited to using only this library. Unable to consider alternatives.
Tried applying CSS in my application to override the default style, but it seems any modifications to the component are being overwritten by a line in my _Layout.cshtml file.
<script type="module" src="~/css/fluentui/web-components.min.js"></script>
Is there a way to customize the CSS within the component itself?
Utilizing design tokens is key to customizing the css for FluentUI components. I came across a variable in the css named --neutral-stroke-strong-rest and found guidance in the documentation here.
To make this work, following all the setup steps outlined in the documentation is necessary. Then, in your razor page, include your component with a reference to the .cs code:
<FluentProgress @ref="ref1"></FluentProgress>
In the .cs code, it was essential to incorporate:
[Inject]
private NeutralStrokeStrongRest neutralStrokeStrongRest { get; set; } = default!;
private FluentProgress? ref1;
Additionally, adding a function to modify the CSS variables using JS was required (further details in the docs):
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await neutralStrokeStrongRest.SetValueFor(ref1.Element, "#FFFFFF".ToSwatch());
StateHasChanged();
}
}
And just like that, the progress bar no longer displays a track!
I am currently working on customizing a header with Bootstrap 4 alpha. <div class="container"> <div class="row"> <div class="col-md-6 text-md-left text-center"> <div class="navbar-brand"><img src="/wp-con ...
My goal is to create a hover effect on a box that triggers another div with easing effects. Below, you'll see that the .images{} class has a 0s infinite scroll initially, but when the .box:hover > .images{} selector is activated, it changes to a 10 ...
In the code snippet below, real-time markup is generated and automatically updates using the setInterval function. The markup includes buttons and hidden content within div elements. Each button reveals its corresponding div, but the div reverts to a hid ...
Trying to implement a modal feature for the first time but encountering an error when clicking the button. Unsure if I'm following the correct procedure as a JS beginner. Any assistance would be appreciated. ERROR { "message": "Uncaugh ...
I am seeking a way to incorporate "Location" data into my user object using seeding from my file The c# object includes a Point, where it is defined as NetTopologySuite.Geometries.Point within the user object public class User: IdentityUser<int> ...
Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...
I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...
I've been working on aligning the page content for different browser sizes using CSS. However, I'm having an issue with the first @media statement - no matter what changes I make in there, it doesn't affect the layout. I've been using ...
I've noticed that the scroll bars are still visible even when I maximize the browser window. I don't see any reason for them to be there. There doesn't seem to be a height issue, so the vertical scrollbars shouldn't be appearing, right ...
Below is the less code snippet: @threshold:{ a:50; b:200; }; @themes:{ a:red; b:blue; }; .mymixin(@name,@color,@thrshld){ //do-something } each(@themes,{ .mymixin(@key,@value,@threshold[@key]); }); Upon executing the code, an error message ...
Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...
As I delve into customizing my very first (woocommerce) email template, I am considering the option of concealing data using CSS display: none. However, a few questions arise regarding the compatibility and support of CSS and display: none: Do all email ...
I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...
Utilizing Selenium in my UWP application has proven challenging due to the WRC runtime. Unfortunately, I am unable to install the Selenium.WebDriver package designed for .NET Framework 3.5 and 4.0, as well as CoreCompat.Selenium.WebDriver which targets .NE ...
I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline; <!doctype html> <html> <head> <link rel="styleshee ...
I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...
One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...
I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...
I want the ingredients list to be styled in green, equipment list in red, and method list in blue using different CSS techniques. My external works fine for changing the color to red, but my internal styles don't seem to apply to the other lists. < ...
Why Using translate() for Element Movement is Superior to Pos: abs Top/left Read the full article Lisa Anderson I struggled with implementing a CSS3 translate animation, so I opted for a jQuery solution that achieves the same effect. Click on the X icon . ...