I need to use a left negative margin so that my element left side would disappear on the left side of the screen.
I tried using position relative but it doesn't work...
<div class="card" id="historyCard">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" id="historyBtn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
היסטוריה
<img src="images/clock.png" id="hamNavHistoryImg" width="87" height="87"/>
</button>
</h5>
</div></div>
#historyCard {
background-color: #ffb59b;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
padding: 30px 0 80px 0;
margin-top: 10px;
z-index: 5;
margin-left:-50px;
}
screenshot
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
<div id="primefacesmessagedlg" class="ui-message-dialog ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container" role="dialog" aria-labelledby="primefacesmessagedlg_title" aria-hidden="false" style="width: auto; height: auto; left: 256.5px; top: 255px; z-index: 1001; display: block;" aria-live="polite">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top ui-draggable-handle">
<span class="ui-dialog-title">Alert!!</span>
<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-closethick"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content" style="height: auto;"><span class="ui-dialog-message ui-messages-info-icon"></span>OTP has been generated and sent to registered Mobile No:XXXXXX0002 with reference number 891</div>
</div>
How to click on this X icon using selenium python code
<div id="primefacesmessagedlg" class="ui-message-dialog ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container" role="dialog" aria-labelledby="primefacesmessagedlg_title" aria-hidden="false" style="width: auto; height: auto; left: 256.5px; top: 255px; z-index: 1001; display: block;" aria-live="polite"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top ui-draggable-handle"><span class="ui-dialog-title">Alert!!</span><a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" href="#" role="button"><span class="ui-icon ui-icon-closethick"></span></a></div><div class="ui-dialog-content ui-widget-content" style="height: auto;"><span class="ui-dialog-message ui-messages-info-icon"></span>reference number 891</div></div>
I tried with this code but I got error
Message: element not interactable
In your code
elem = driver.find_element_by_xpath('//a[#class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"]').click()
you have used "Click" method, it won't return anything.
Just use this driver.find_element_by_xpath('//a[#class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"]').click()
You can try to add waiting
button = WebDriverWait(browser,10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'button.dismiss')))
button.click()
Or try to use js click
element = driver.find_element_by_xpath('//a[#class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"]')
def js_click(self, element):
driver.execute_script("arguments[0].click();", element)
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 ;)
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?
Is there some easy way to align stuff in div containers to the right or bottom:
<div class="span-24 align-right last">Text appears on the right side of the layout</div>
or:
<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div>
or:
<div class="span-24 vertical-middle last">Middle of the container</div>
Here's a sample of what I'm working with trying to position the "topnav" below:
<div class="container">
<div class="span-16">
<h1>Header</h1>
</div>
<div class="span-8 last vertical-middle">
<div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div>
</div>
<hr />
...
</div>
Use position: absolute. For example:
.align-right {
position: absolute;
right: 0;
}
/* Or, alternatively, */
.align-right {
float: right;
}
.bottom {
position: absolute;
bottom: 0;
}
.vertical-middle {
position: absolute;
top: 50%;
}
Note that for vertical-middle, this will center the top edge of the content, no the content itself.
Make sure that the containing DIV is position: relative to force it to become the offset parent (which the position of the children are relative to) EDIT: In other words, add the following rule:
.container {
position: relative;
}