I've been experimenting around a lot with the MudBlazor Library lately. I'm pretty happy with it and considering to use it in my next project. But currently I have a issue that confuses me.
To make the issue easier replicable, I created a new and clean demo solution in Blazor WASM ('ASP.NET Core Hosted' checkbox checked). In the client sided project, I installed the default MudBlazor Package and made all relevant code additions according to the documentation to make the library work.
I added the relevant MudTheme-Code to the MainLayout.razor-File, which in simplified terms currently looks like this:
#using MudBlazor;
#inherits LayoutComponentBase
<MudThemeProvider #ref="#_mudThemeProvider" IsDarkMode="true" />
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
About
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
#code {
private MudThemeProvider _mudThemeProvider;
}
Now the issue is that the DarkMode of the MudTheme works as intended, but only for the content inside the MainBody. The top-row (which I want to use as a header row for additional features) doesn't initially get applied after loading the page:
So I've tried to comment out the background-color line in the .top-row class of the MainLayout.razor.css-File, which doesn't seem to change anything, even after restarting the application.
Only when changing a line in the MainLayout.razor.css-File (even if it is just a comment) while the background-color line is also removed, then the top-row will also be in the dark-mode.
I can only guess why the application behaves like that. I've tried several ideas and googled around, but I wasn't able to find a solution for this.
So my two questions here are:
Why does the dark-theme have a conflict with the white background color in the css of the top-row, but not the rest of the application (body content of all pages)?
Why does the dark-theme not get applied to the top-row, unless I make a change in the MainLayout's css-File, even if it just a comment? What can I do to get the dark theme working after the initial rendering?
Let me know if you need any additional files or code from the solution.
Thanks!
This seems to me a cache problem.
You have several options:
Reload the page with CTRL + F5 (Windows/Linux) or ⌘ + ⇧ SHIFT + R (Mac)
Use the incognito mode of your browser (example for Chrome: https://support.google.com/chrome/answer/95464)
Disable the cache with developer tools (example for Chrome: Disabling Chrome cache for website development) - this my favourite, but remember that this setting is only active while the developer tools are open
Related
I like to use some kind of glyphicons in my page,But it is not showing,But when
tried the below ,(attached images of View with and without this reference )
in my page the whole page changes,i have the bootstrap.min.css page file,and am also tried calling this file,But still it is not working ,Any solution?
Code
<span class="glyphicon glyphicon-unchecked" style="color:#s.mcolor"></span>
I'm writing a C# form application which automates some user behaviour by clicking through buttons, links, forms, etc in a WebBrowser. Everything worked fine, im using InvokeMember("click") without problem on several buttons and links, but now i'm stuck with one click.
I'm struggling for days, and i have tried several tips, but nothing worked yet. The HTML code with the form basically looks like the following:
<form name="shipsChosen" id="shipsChosen" method="post" action="http://www.example.com/index.php?page=2">
<li class="off" id="button1">
<div class="buildingimg"></div>
<input id="ship_1"/>
</li>
<li class="off" id="button2">
<div class="buildingimg"></div>
<input id="ship_2"/>
</li>
<li class="off" id="button3">
<div class="buildingimg"></div>
<input id="ship_3"/>
</li>
</form>
<a id="continue" class="off" href="" onClick="trySubmit(); return false;"><span>Submit</span></a>
What i want, is to click on the link with "sendall" ID, and then click on the link with "continue" ID.
I have already tried the followings, but none of them worked. Nothing happens:
HtmlElement AllShips = webBrowser1.Document.GetElementById("sendall");
AllShips.RaiseEvent("onclick");
AllShips.InvokeMember("click");
I have also tried to put some value into the input fields, but it's not works neither:
HtmlElement Input= webBrowser1.Document.GetElementById("ship_202");
Input.Focus();
Input.InnerText = "ship_1";
It's very interesting to me, since althought it's not working when i run this without any user interaction in my C# form application with WebBrowser, BUT if i click once by myself in the WebBrowser, and run the click codes above, it works. But it's not automation right..?
Anyone experienced similar problems like this? The only difference i found between the working clicks and in this, is the in the HTML.
More:
I'm using Internet Explorer 11 FEATURE_BROWSER_EMULATION for the WebBrowser.
The page is fully loaded.
Try letting your application pause before invoking the clicks and between them, because the page may still be busy with some earlier processes.
you can use a timer control for that effect.
I am styling up a website that is using Orchard and I have noticed their is a custom content type which has a message, here is a standard message in HTML
<p>Some text</p>
<p>Some more text</p>
This is fine however thanks to the Orchard.Core.Common.Views.Fields.Common.Text.cshtml it is inserting a <br /> after each </p>
Here is their view which is rendering the message
#using Orchard.Utility.Extensions;
#{
string name = Model.ContentField.DisplayName;
}
#if (HasText(name) && HasText(Model.Value)) {
<p class="text-field"><span class="name">#name:</span> <span class="value">#(new MvcHtmlString(Html.Encode((HtmlString) Model.Value).ReplaceNewLinesWith("<br />")))</span></p>
}
How can I override this? I have tried to copy and paste the view into my Themes/View folder but it doesn't seem to override it. I just want to remove the ".ReplaceNewLinesWith("<br />")"
I haven't tried this with Orchard 1.6, however this works fine with the latest version (1.8). The obvious things to check are that your theme is active and that you given your view the correct name. If you want a global override then the View should be in the root of your themes View folder, with the name 'Fields.Common.Text.cshtml'.
If you don't want to change the behaviour for all text fields, then you may want to turn on shape tracing and find an Alternate for the view that is tied to either the field name of the content type that it's contained in (for example 'Fields.Common.Text-SomeTextField.cshtml'. This would reduce the impact of any change you make.
That said, are you sure you're doing the right thing though? If your content contains <p> tags then at least in the latest version, the tags will be stripped, which makes sense since otherwise you'd end up with nested <p> tags:
<p class="text-field"><span class="name">SomeTextField:</span> <span class="value">
<p>Some text</p>
<p>Some more text</p></span>
</p>
Also, as a warning, whilst it is certainly possible to override this view in the latest version of Orchard, the view has actually changed so that the new line processing is no longer in the view. It has been moved out into a Filter Orchard.Core.Common.Services.TextFieldFilter. So if the site is updated in the future you may find that you need to revisit the area.
So I'm developing a Model View Controller (MVC) project. Due to the size and complexity, I'm trying to ensure organization. I've managed to stumble on a unique quandary, one that has left me quite stumped. My issue is drawn from a Jquery Rotator that I'm integrating into my site.
My Solution Explorer:
Content : This particular folder contains three direct sub-folders Images, Scripts, and Stylesheets.
Those three sub-folders contain more specific and honed in details, an example would be the Scripts contains another folder called Rotator for this jQuery implementation.
So the dilemma occurs inside the View.
An example within this View:
<div class = "banner-style">
<div id = "Infinite-Banner">
<div class = "banner-container">
<div class = "slides">
<img src = "~/Content/Images/Banner/Slides/One.jpg">
<img src = "~/Content/Images/Banner/Slides/Two.jpg">
</div>
</div>
</div>
</div>
So within this structure it doesn't appear to load the Images. Though it is properly mapped to the directory. But if you use the same structure above but change the img portion to:
<div class = "slide-one" />
<div class = "slide-two" />
Then in a the correlating Stylesheet, simply define a background: url(~/Content/Images/Banner/Slides/One.jpg); for the slide-one Element it magically appears.
So this makes me believe that it is due to nesting. But doesn't quite make sense, as this will force me to build an inner element between the div slides so that I can generate the proper affects.
The other idea would be to create a model that maps all the relational image data; but that seems like an awful lot of work.
Is this a limitation or an issue specific to my machine? What would be the best work around to such an issue? Is this indeed due to the structure I've taken to my folders?
Try using the Url.Content method:
<img src="#Url.Content("~/content/images/banner/slides/one.jpg")" />
You didn't post what the actual URL is being built as, but, I would guess that the path is wrong because whatever controller you're hitting is being used in the relative path.
My question: How to create an on hover effect with for my ASP.net menu.
The problem is that since the standard ASP.net menu doesnt have an on hover function, its quite hard/impossible(?) to create.
After doing my homework i saw some people who tried it with css, jquery and other methods... but i would prefer 'normal' html or css without incredibly complicated solutions.
Should that really be impossible, is there any clear way how to use it?
Most of the css options failed, or were incredibly complicated.
What exactly should happen:
A menu item for example
<asp:MenuItem NavigateUrl="~/Pages/Test.aspx" Text="Test" Value="Test" Selectable="true"></asp:MenuItem>
Should get a different background because of on hover effect.
Maybe changing the CSS from within the C# code into something else?
Thanks for your answer!
~Solved~
Thank you very much for your help! The problem is solved thanks to both of the answers.
I tried inplementing that menu, when i noticed that in this menu the hover effect also didnt work. What was the problem? I use 2 css files. And because the first css file contained some instruction as to how to handle the a:hover, all of the other hover effects were ignored.
Now that i know why the hover effect wasnt working, i can solve this problem. Thank you both very much!
Alright guys, it took me quite some time to figure out how to create the on hover effect with the ASP.net menu. So, i found an easy way, without all the hard stuff or lots of code.
If you look at your asp page in your browser, go to page source. When you look at your menu, you will notice that it looks like this:
<li>
<a class="level1" href="Home.aspx">
<img src="../Images/home.png" alt="" title="" class="icon" />Home</a></li>
<li>
<a class="level1" href="Page2.aspx">
<img src="../Images/homehover.png" alt="" title="" class="icon" />Page2</a><ul class="level2">
The solution would be to change your css:
a:hover[href*="Home"][class*="level1"]
{
color: black;
}
This piece of CSS selects the A element, where (in the HTML) the attributes href and class contain(or are equal to) Home and level1.
It might be a bit different if you have a more complex menu then i do, for i have just 2 levels deep. (menu and submenu)
Hope it helps you guys!
Then this is the end of my first question/answer on stackoverflow.
Thanks for your help!
ps: If it doesnt work, remove all a:hover statements in all related css files to the page with the menu. It might also be a problem if you use the StaticHoverStyle/DynamicHoverStyle.