We Keep Coding

How to align list items with icons?

I have an unordered list in my sidebar navigation and added icons in the left but the list item object seems without alignment in the left due to the icons different sizes.
Here's my example:
And here what I want:
Here the code:
HTML(with ASP.Net MVC elements):
<div class="wrapper">
<div class="sidebar text-light bg-primary-darker">
<ul>
<li><a asp-action="Info" asp-controller="Dashboard"><i class="fas fa-home"></i>Home</a></li>
<li><a asp-action="Invoices" asp-controller="Dashboard"><i class="fas fa-file-invoice-dollar"></i>Invoices</a></li>
<li><a asp-action="Customers" asp-controller="Dashboard"><i class="fas fa-user-friends"></i>Customers</a></li>
<li><a asp-action="Settings" asp-controller="Dashboard"><i class="fas fa-cog"></i>Settings</a></li>
</ul>
</div>
</div>
CSS:
.wrapper {
margin-top: -1px;
position: relative;
z-index: 1;
}
.wrapper .sidebar {
position: fixed;
width: 15%;
height: 100%;
background-color: #016fe6;
padding: 50px 0;
font-size: 22px;
}
.wrapper .sidebar ul {
display: flex;
flex-direction: column;
padding-inline-start: 10px;
}
.wrapper .sidebar li {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
list-style-type: none;
margin: 10px;
height: 100%;
}
.wrapper .sidebar li a {
text-decoration: none;
display: block;
color: #fff;
padding-left: 15px;
}
.wrapper .sidebar li a i {
margin-right: 15px;
}
.wrapper .sidebar li a:hover{
color: rgb(189, 204, 204);
}
I'm using Bootstrap 4 also.

Because you are using font awesome you can add fa-fw to them.
More info Fixed Width Icons

I want to create chatbot widget plugin in nopcommerce 4.1 or above

I am new to nopcommerce,I understood all the basic code flow of nopcommerce.So Now i started replicating plugins (widgets).I created a plugin can install and uninstall but no idea how to create a widget and add it commonly in all pages.what i am trying to achieve is call the iframe component inside the chat bar.I'll add the code of view in this question
Now i added this code in nop.web/shared/_root.cshtml. So now chat bar comes in all pages
<div>
<a class="float" id="button" onclick="openForm()">
<img src="~/files/chatbotv4/VertChat.png" class="my-float">
</a>
<div class="chat-popup" id="myForm">
<div class="chathead">
<div class="btn-close">
<button type="button" class="close" onclick="closeForm()">_</button>
</div>
<div class="btn-max" id="max">
<div type="button" class="fa fa-window-maximize" style="background-color:#16c886; font-size:21px;" onclick="max_chat()">&square;</div>
</div>
<div class="btn-min" id="min">
<div type="button" class="fa fa-window-restore" style="background-color:#16c886; font-size:21px;" onclick="min_chat()">❐</div>
</div>
</div>
<iframe src='~/files/chatbotv4/botchat.html?name=#customerName&id=#customerId' style='min-width: 100%; width: 100%; min-height: 100%;'></iframe>
</div>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("button").style.display = "none";
document.getElementsByClassName("header")[0].style.zIndex = "0";
document.getElementsByClassName("header-menu")[0].style.zIndex = "0";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "-1";
//$(".header").css("csstext", " z-index: 0 ;");
//$(".header-menu").css("csstext", " z-index: 0;");
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("button").style.display = "block";
document.getElementsByClassName("header")[0].style.zIndex = "1";
document.getElementsByClassName("header-menu")[0].style.zIndex = "1";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "1";
}
function max_chat() {
document.getElementById("max").style.display = "none";
document.getElementById("min").style.display = "block";
// $(".chat-popup").css("cssText", " width: 50%;");
document.getElementsByClassName("chat-popup")[0].style.width = "50%";
}
function min_chat() {
document.getElementById("min").style.display = "none";
document.getElementById("max").style.display = "block";
document.getElementsByClassName("chat-popup")[0].style.width = "30%";
}
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 1;
height: 100%;
width: 30%;
}
iframe {
background-color: white;
min-height: 95% !important;
min-width: 100%
}
.btn-close {
padding-left: 95%;
position: absolute;
z-index: 1032;
}
.close {
background: transparent;
border: none;
}
.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
background-color: #0C9;
//color:#FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
z-index: 1030;
}
.my-float {
margin-top: 1px;
margin-left: auto;
height: 58px;
width: 58px;
}
.btn-max {
padding-left: 87%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
cursor: pointer;
}
.btn-min {
padding-left: 90%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
display: none;
cursor: pointer;
}
.chathead {
height: 5%;
width: 100%;
position: relative;
background-color: #16c886;
}
</style>
now i want to add it as a seperate widget.

The widget is a defined area where a developer can inject his/her expected functionality. There are already a lot of widgets define by the core team, one of a good example of the widget plugin is NivoSlider. In your plugin you have to implement IWidgetPlugin and need to define expected viewcomponent name of your plugin at "GetPublicViewComponent" method and the name of the widget of nopcommerce at "GetWidgetZones" method where you want to show the viewcomponent at a public site. If you want to know more about the widget plugin, you can visit DEVELOP AND UNDERSTAND WIDGET PLUGIN IN NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION

Show progress bar until the webgrid completely loads and pagging to next or previous pages in the webgrid in MVC

I am trying to show a progress bar until my grid fully loads, I seen various method they work based on a button click but i am unable to come up with a method to show a progress bar until my grid completely load and when i navigate to other pages in a webgrid . And this is the first time i am working with webgrid and i am not aware of its events to trigger the method to display the image on to the page.
I want to show this div on the page until my webgrid is completely load or changed
#<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
</p>
</div>
This my code to display a webgrid
#Using Html.BeginForm()
#<div>
#Code
Dim grid = New WebGrid(Nothing, ajaxUpdateContainerId:="gridContent")
Dim pageSize As Integer = ViewBag.PageSize
If pageSize = 0 Then
grid.Bind(ViewBag.GridData, autoSortAndPage:=True)
Else
grid.Bind(ViewBag.GridData, , rowCount:=pageSize, autoSortAndPage:=False)
End If
#<div id="gridContent">
#grid.GetHtml(tableStyle:="gridView",
headerStyle:="gridViewheader",
alternatingRowStyle:="alternateItemStyle",
columns:=grid.Columns(grid.Column("emp_NO", "emp Number", canSort:=True),
grid.Column("emp_TYPE_CODE", "emp Type Code" canSort:=False),
grid.Column("emp_NAME", "emp Name", canSort:=False),
grid.Column("ADDRESS", "Address", canSort:=False),
</div>
End code
</div>
End Using

TRY THIS:::
div #spinner {
display: none;
width: auto;
height: auto;
position: fixed;
background: url(spinner.gif) no-repeat center #fff;
text-align: center;
padding: 10px;
font: bold 16px Tahoma, Geneva, sans-serif;
border: 1px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index: 2;
overflow: auto;
}
function showProgress() {
if (!spinnerVisible) {
$("#spinner").fadeIn("fast");
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
var spinner = $("#spinner");
spinner.stop();
spinner.fadeOut("fast");
spinnerVisible = false;
}
};
$(document).ajaxStart(function () {
showProgress();
}).ajaxStop(function () {
hideProgress();
});

how to verify a pop up appeared for few seconds using C# and Selenium

How to verify the text or title of a pop up visible for few seconds using C# selenium webdriver. which appears under a certain conditions.
This is the code I have:
<div class="blockUI blockMsg blockPage" style="z-index: 100001; position: fixed; padding: 5px; margin: 0px; width: 350px;
top: 10px; text-align: center; color: rgb(255, 255, 255); border: medium none; background-color: rgb(0, 0, 0); cursor:
default; right: 10px; opacity: 0; border-radius: 10px;">

Regex expression to update the div's style properties - width & height

Sample string:-
<div class="ui-droppable" id="ParentDIV" style="width: 286pt; height: 212pt; background-color: #00752d; background-image: none;">
<div class="be-canvas-grid" style="background-image: none">
<div style="width: 200px; height: 50px; top: 77px; left: 162px; font-family: Arial; font-size: 12pt; color: rgb(0, 0, 0); overflow: hidden;" data-uid="2" class="be-component be-text ui-draggable ui-droppable">
<span>hello from simple text</span>
</div>
<div style="width: 161.567px; height: 39.5667px; top: 127px; left: 172px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="3" class="be-component be-text ui-draggable ui-droppable">
<span>{[C-FULLNAME:LC]}</span>
</div>
<div style="width: auto; height: auto; top: 196px; left: 216px;" data-uid="4" class="be-component be-image ui-draggable">
<img src="https://localhost/a/images/BarcodeType1.jpeg" data-qrstub="" alt="">
</div>
<div style="width: 200px; height: 50px; top: 6px; left: 12px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="5" class="be-component be-text ui-draggable ui-droppable">
<span>asd</span>
</div>
</div>
</div>
I want to pull the ParentDIV elements's style properties i.e. width and height. Then I want to update the width and height css properties with my values. The order of height and width properties in the style tag of ParentDIV may get changed also.
Please suggest the regex. I would be making this code changes in C#.net.
Regex expression can build with the help of online tool http://www.gskinner.com/RegExr/.