i have below html structure, how can i use python senlenium to locate pseudo element 'before',
<div tabindex="0" data-elemkey="month" data-elemtype="ListBox" data-type="elem" class=" " style="position: absolute; ">
<div style="position: absolute; left: 0px; top: 0px; height: 34px; width: 145px; z-index: 10000;">
<div class="gcell-div font-1669190550589" >
<div class="gcell-div-content v-align-center h-align-left" >
<span class="" style="pointer-events: none; max-height: 100%; max-width: 100%; ">
<i class="common-collapse-down">
::before
i have tried by :
driver.find_element(by=By.CSS_SELECTOR,value='span.listUI-arrow>i')
but because there're many same other 'span.listUI-arrow' elements, so i would like to relation with parent :data-elemkey="month ; how can i get it, thanks
Related
I am working on a personal project where I am wanting to use an HTML form to send data to 3 different Excel sheets. The "fullName" input box will go to the "Name" Excel sheet. The "tag" input box will go to the "Tag" Excel sheet. And finally, the "email" input box will go to the "Email" Excel sheet.
I then have my "Master" sheet inputting and syncing in a single cell (for admin reference use) whatever data is placed in the other 3 Excel sheets.
My issue, is that I am unsure how to send that data to the Excel sheets when "submit" is clicked. It is also very important for that data to be stored in Excel depending on date that is selected on the form using the datepicker. I am using the dates as columns.
'<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<div id="error"></div>
<form id="form-submit" action="">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input id="fullName" type="text" placeholder="Enter your full name" required>
</div>
<div class="input-box">
<span class="details">District Email</span>
<input id="email" type="text" placeholder="Enter your district email" pattern="^[a-zA-Z.-_]+#medford\.k12.or.us$" required>
</div>
<div class="input-box">
<span class="details">Laptop Tag Number</span>
<input id="tag" type="text" placeholder="Enter your tag number" pattern="[0-9]{6}" required>
</div>
<div class="input-box">
<span class="details">Drop Off Date</span>
<input id="datepicker" type="text" placeholder="Enter desired drop off date" required>
</div>
</div>
<div class="button">
<button id="submit">Submit</button>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
`
` *{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-sarif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg,#97cc79,#336717);
}
.container{
max-width: 700px;
width: 100%;
background: #fff;
padding: 25px 30px;
border-radius: 5px;
}
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
background: linear-gradient(135deg, #97cc79, #336717);
}
.container form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
form .user-details .input-box{
margin: 20px 0 12px 0;
width: calc(100% / 2 - 20px);
}
.user-details .input-box .details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid #ccc;
padding-left: 15px;
font-size: 16px;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #97cc79;
}
form .gender-details .gender-title{
font-size: 20px;
font-weight: 500;
}
form .gender-details .category{
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
.gender-details .category label{
display: flex;
align-items: center;
}
.gender-details .category .dot{
height: 18px;
width: 18px;
background: #d9d9d9;
border-radius: 50%;
margin-right: 10px;
border: 5px solid transparent;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three{
border-color: #d9d9d9;
background: #97cc79;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 45px 0;
}
form .button button{
height: 100%;
width: 100%;
outline: none;
color: #fff;
border: none;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
letter-spacing: 1px;
background: linear-gradient(135deg, #97cc79, #336717);
}
submit-form .button button:hover{
background: linear-gradient(-135deg, #97cc79,#336717);
}
`
Here is my html:
<div class="rack-label" *ngFor="let product of productsToPrint;let indexOfElement=index;let l=count; " >
// Showing barcodes here
<div *ngIf="(indexOfElement+1)%12==0" class="row-footer">
// And i want to page-break-after works here
// cuz i am showing barcodes
</div>
</div>
`
And here is my css to print page:
#media print {
#page{
margin:3mm 0mm 2mm 3mm;
border: 1px solid red;
/* height: 210mm;
width: 148.5mm; */
size:A4;
margin: 0;
}
html{
border: 1px solid yellow;
}
body
{
width: 210mm;
height: 297mm;
display: grid;
grid-template-columns: 9cm 9cm 9cm;
grid-template-rows:auto auto auto;
}
.row-footer{
clear: both; page-break-before: always;
page-break-inside: avoid;
}
}
Or is there anyway to fix this issue ? Actually all i want to do print 3 col 4 rows barcode to an A5 page.But its not working on ng-print.So i want to do set is as A4 and let space to half of page.
The problem seems to be that absolute positioned elements don't take up any space. Chromium seems to be considering the page essentially blank, so a new page is not necessary.
I've address the issue by giving a minimal size to the relative positioned elements that contain the absolute positioned elements.
I cannot reproduce your example, because I do not know what you are inserting for the barcodes, and your non-printing styles may also be impacting it, but here is an example that produces the problem, and a solution.
Problem, the HTML below will all print on the same page (sometimes, it breaks after first page):
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
The divs with relative positioning are all zero size, and the absolute positioned elements inside of it don't impact the size. Adding a 1mm width and height, gives proper page breaks
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
I've got a complex SVG that is the floor plan of a building. I'd like to create modal windows or popups that provide a small description of the different rooms in the building.
The question: how do I add a boostrap modal (or other popup) on click of a or inside the SVG? I've tried adding the modal code within a tag but that doesn't seem to be working.
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div id="section-h-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</foreignobject>
You have used wrong tag to trigger the Modal Know more about
foreignObject
Click Here
and your solution is
here
<svg>
<g>
<a xlink:href="#" class="btn-cta" >
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h"
x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3"
style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);" >
</rect>
</a>
</g>
</svg>
<div class="overlay">
<div class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close-btn">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS
.btn-cta {
width: 120px;
display: block;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
background: #ccc;
color: #555;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
margin-top: -10%;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all 0.5s cubic-bezier(0.59, -0.17, 0.3, 1.67);
}
.overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.modal {
transform: translate(0px, -50px);
transition: all 0.7s cubic-bezier(0.59, -0.17, 0.3, 1.67);
position: relative;
padding: 30px;
width: 400px;
background-color: #ddd;
color: #231D23;
text-align: center;
overflow: hidden;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);
}
.modal .close-btn {
position: absolute;
padding: 3px 9px;
font-size: 24px;
text-align: center;
background: #ccc;
color: #9c9c9c;
top: -1px;
right: 0;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
JQuery
$(function () {
$('.btn-cta').click(function () {
$('.overlay').addClass('is-open');
return false;
});
$('.close-btn').click(function () {
$('.overlay').removeClass('is-open');
});
});
In most libraries, e.g., bootstrap or materialize, you can open modal dialogs via JavaScript codes. For this reason, please read their examples to find out, how to open it.
To allow click events on your svg elements, you have to know, that each of the svg elements is an ordinary dom element. That means, you can access it like a p tag or something similar.
For example, you have a circle in your svg with id circle01. To add an on-click-event, you can use:
$("#circle01").click(function (e) { ... });
via jQuery or
document.getElementById("circle01").onclick = function (e) { ... };
via pure JavaScript.
To understand the magic of svg, you have to know, that it is pure html ;)
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I am trying to make bootstrap drop down menu full screen width and fluid, but it seems i can not do it :) I am trying to put the search field into drop down menu (search filed & search button have to be in the center of the submenu field).
HTML:
<ul class="nav pull-right">
<li class="dropdown">
Search</b>
<ul class="dropdown-menu" id="menu1">
<div class="search_field">
<form class="navbar-form pull-right">
<input type="text" class="span4" placeholder="Search">
<button type="submit" class="btn btn-search">Search</button>
</form>
</div>
</ul>
</li>
</ul>
CSS:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 0px !important;
border-radius: 0px !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
float: left;
list-style: none outside none;
margin: 0px;
min-width: 100%;
padding: 10px 100%;
margin: 0, -100%;
position: absolute;
top: 100%;
z-index: 1000;
}
}
.btn-search {
background-color: orange !important;
background-image: linear-gradient(to bottom, orange, #orange light) !important;
background-repeat: repeat-x !important;
padding: 10px 20px !important;
}