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/.
Related
I just dowloaded the newset version of gembox document in order to convert ah html file into PDF.
It seems to be working, but the resulting PDF is losing some information.
Here is what the HTML looks like:
<html>
<head>
<style>
.main-container {
width: 383.62px;
height: 576.95px;
text-align: center;
padding: 96px 48px;
font-family: Verdana;
}
.code {
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
}
.mrg-btm {
margin-bottom: 8px;
}
.name-and-code {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.flex-div {
display: flex;
flex-direction: row;
width: 100%;
}
.distance-one {
width: 50%;
text-align: left;
font-size: 14px;
}
.distance-two {
width: 50%;
text-align: right;
font-size: 14px;
}
.font-bold {
font-weight: bold;
}
.scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.data-scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
.materiali {
font-size: 24px;
font-weight: bold;
text-align: left;
letter-spacing: 5px;
}
.last-codes {
display: flex;
flex-direction: row;
font-size: 14px;
text-align: left;
font-family: TimesNewRoman;
}
.mrg-btm-two {
margin-bottom: 64px;
}
.mrg-btm-three {
margin-bottom: 16px;
}
.mrg-btm-four {
margin-bottom: 20px;
}
.mrg-rgt-one {
margin-right: 20px;
}
.mrg-rgt-two {
margin-right: 8px;
}
.mrg-rgt-three {
margin-right: 16px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="code mrg-btm">
<label>STM0583A0</label>
</div>
<div class="name-and-code mrg-btm-four">
<label>TUNISI 0583</label>
</div>
<div class="mrg-btm-four">
<img alt='Barcode Generator TEC-IT'
src='https://barcode.tec-it.com/barcode.ashx?data=02329747&code=Code39'/>
</div>
<div class="flex-div mrg-btm">
<label class="distance-one">SqA</label>
<label class="distance-two font-bold">2481m (#13)</label>
</div>
<div class="flex-div mrg-btm-three">
<label class="distance-one">GOMSET1 (#2)</label>
<label class="distance-two">11/10/2022</label>
</div>
<div class="scadenza mrg-btm">
<label>Scadenza</label>
</div>
<div class="data-scadenza mrg-btm">
<label>31/10/2022</label>
</div>
<div class="materiali mrg-btm">
<label>Materiali</label>
</div>
<div class="last-codes mrg-btm-two">
<label class="mrg-rgt-one">RC1812</label>
<label>000331799805</label>
</div>
<div class="last-codes mrg-btm">
<label class="mrg-rgt-two">SB00040A0</label>
<label class="mrg-rgt-two">STR1026420</label>
<label>25/10/2022</label>
</div>
<div class="last-codes">
<label class="mrg-rgt-two">C-1812</label>
<label class="mrg-rgt-three">RC1812</label>
<label>000331799805</label>
</div>
</div>
</body>
</html>
Here is the c# code. I tried several methods but none of them work.
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
DocumentModel document = DocumentModel.Load(filenameHtml);
document.Save(path + pdfFilename);
//CODE 2
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
string body = File.ReadAllText(filenameHtml);
var htmlLoadOptions = new HtmlLoadOptions();
using (var htmlStream = new MemoryStream(htmlLoadOptions.Encoding.GetBytes(body)))
{
var document = DocumentModel.Load(htmlStream, htmlLoadOptions);
document.Save(path + pdfFilename);
}
I tried also setting up some parameters, but in every test, the size of the area of the HTML was lost, the Times New Roman font as well, and also the flex div spacing some elements.
Here is what the original xml looks like:
And here is the result
What can I change to make the Gembox Document output look like the original?
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 am trying to locate the drop down box using C# in selenium webdriver. Tried with different
option like By.Id, By.XPath, But unable to locate the element. Below is the HTML code for
the same.
<div class="chzn-drop" style="left: -9000px; width: 387px; top: 32px;">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 352px;" tabindex="5">
</div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
<ul class="chzn-results" style="overflow: hidden; width: auto;">
<div class="slimScrollBar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 15px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 121.263px;"></div>
<div class="slimScrollRail" style="width: 15px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
</div>
Try By.Css, e.g.
driver.find(By.Css(".slimScrollDiv"));
I need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!
my aspx code:
<div class="tabcontent">
<div class="tabcontent-inner">
<div class="tabcontent-inner-left grid_20">
</div>
<div class="tabcontent-inner-right grid_20">
</div>
</div>
</div>
my stylesheet css:
.tabcontent-inner {
width: inherit;
padding: 10px 10px 10px;
margin-top: 10px;
margin-bottom: 1px;
position: relative;
display: block;
}
.tabcontent-inner-left {
padding: 20px 20px;
border-left: solid 1px #ddd;
width: 45%;
float: left
}
.tabcontent-inner-right{
padding: 20px 20px;
border-right: solid 1px #ddd;
width: 45%;
float: right
}
Basically, I want the tabcontent-inner div to get the height of what is inside of it.
this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height
you can find more suitable answer here How do you keep parents of floated elements from collapsing?
Add this code to Your CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
and
change
<div class="tabcontent-inner">
to
<div class="tabcontent-inner clearfix">
Semi colons are missing in the css after
float : left
and
float : right
This is what I have and it is not being centered. It's all the way to the left for some reason.
<div>
<asp:Label ID="eagleReplicationManagerLabel" runat="server" CssClass="eagleReplicationManagerLabel">
Eagle Replication Manager
</asp:Label>
</div>
css for it:
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
It is actually working but you couldn't see the result because it is rendered as a span which takes the exact width of its content. So the text didn't have enough space to adjust.
Increasing the width in your css style will show you why
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
width:500px;
}
The text-align: center; needs to be on the <div> that contains the label.
the text is centered but is is an inline element so it is only as wide as the text inside.
That is why you can't tell that it is centered.
Give it some width or make it block and you will see the centering.
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block
}
The problem here is that asp:Label is rendered as a span on html and span elements are, by default, styled with display:inline; as a result, your CSS class does nothing.
If you want to center the text in the DIV, set the text-align:center on the DIV or set display:block on .eagleReplicationManagerLabel
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block;
}
.center{
width:200px;
margin:auto;
}
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
<div>
<div class="center">
<asp:Label Text="Eagle Replication Manager" ID="eagleReplicationManagerLabel1" runat="server" CssClass="eagleReplicationManagerLabel"></asp:Label>
</div>
</div>