CSS classes not working with svg elements - svg

I'm using the vis.js library and most things work. Like when I manually style the elements with the "style" tag however when I use the class attribute the styles are not applied.
The SVG element
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="420px" height="165px">
<foreignObject x="0" y="0" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" style="background-color: #fff;height: 100%, width: 100%; display: flex; padding: 8px; border-radius: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); box-sizing: border-box;">
// This doesn't work
<div style="flex: 1;">
<h1 class="testyh1">Report Id</h1>
<h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">1</h2>
</div>
// This works
<div style="flex: 1;">
<h1 style="color: #0481E2; margin-top: 0; margin-bottom: 3px; font-size: 12px; line-height: normal;">Report Name</h1>
<h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">Medicine-Stock</h2>
</div>
</div>
</foreignObject>
</svg>`;
CSS
.testyh1 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: 12px;
line-height: normal;
}

I use style tag and update these in HTML page with script tag:
<style type="text/css">
#mynetwork {
margin: auto;
width: 1000px;
height: 800px;
border: 1px solid lightgray;
}
</style>

Related

Hover on nested elements using SASS and BEM

I try to use hover for button element and for SVG within button. But in here piece of code https://codepen.io/asssel/pen/wvrojOd It doesn't work for SVG. Help me how to implement it.
.tag {
width: 120px;
padding: 6px 12px;
border: 1px solid #1F1F1F;
border-radius: 18px;
cursor: pointer;
color: #1F1F1F;
background-color: white;
&_label {
font-size: 12px;
line-height: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
}
&_remove {
border: none;
background-color: transparent;
}
&:hover, &_icon path {
background-color: #1F1F1F;
color: white;
stroke: white;
}
}
<div class='tag'>
<span class='tag_label'>default tag</span>
<button class='tag_remove'>
<svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke="#404040" stroke-width="2" stroke-linecap="square"/>
</svg>
</button>
</div>
First of all I changed your CSS to plain CSS to make it work in the snippet.
I guess that the main problem is the hover effect. To change the stroke of the <path> your CSS selector need to start from the element that is hovered. So, replace &_icon path with &:hover &_icon path.
And then you also make sure that you use fill and stroke properties for SVG elements.
.tag {
width: 120px;
padding: 6px 12px;
border: 1px solid #1F1F1F;
border-radius: 18px;
cursor: pointer;
color: #1F1F1F;
background-color: white;
display: flex;
align-items: center;
}
.tag_label {
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
}
.tag_icon path {
stroke: #1F1F1F;
}
.tag_remove {
border: none;
background-color: transparent;
}
.tag:hover,
.tag:hover .tag_icon path {
background-color: #1F1F1F;
color: white;
stroke: white;
}
<div class='tag'>
<span class='tag_label'>default tag</span>
<button class='tag_remove'>
<svg class='tag_icon' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.5L1.5 8.5M8.5 8.5L1.5 1.5" stroke-width="2" stroke-linecap="square"/>
</svg>
</button>
</div>

How do I find this span with selenium in python?

Just wondering how to get the span text out of this div when using selenium in python.
<div class="clsFrameworkElement"
id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
Thanks.
You can use xpath to get the span element.
Please see below snippet:
from selenium import webdriver
driver = webdriver.Chrome()
html_content = """
<html>
<head></head>
<body>
<div class="clsFrameworkElement" id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
</body>
</html>
"""
driver.get("data:text/html;charset=utf-8,{html_content}".format(html_content=html_content))
node = driver.find_element_by_xpath("//div[#class='clsFrameworkElement']/span")
print(node.text)
This will print :
Get a non-disclosure agreement.
You can read more about xpath here: https://selenium-python.readthedocs.io/locating-elements.html

My menu bar will not resize when window resizes

I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.

Z-index with positioning not working with positioning & Alignment

I am having problems with the z-index. I am trying to get the button link to display overtop of the image, but it just isn't seeming to work. The image below shows how I am wanting it to look.
Here is the HTML:
<div class="featured">
<img src="images/featured.png" alt="Featured Image">
<div class="button-2">
Buy Now
</div>
</div>
Here is the CSS:
.featured img
{
float: left;
z-index: -1;
}
.button-2
{
-moz-box-shadow:inset 0px 1px 0px 0px #940c00;
-webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
box-shadow:inset 0px 1px 0px 0px #940c00;
background-color:#8b0101;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:43px;
line-height:43px;
width:135px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
float: left;
}
.button-2 a
{
color: #fff;
font-size: 20px;
letter-spacing: 2px;
}
.button-2:hover
{
background-color:#6c0301;
}
.button-2:active
{
position:relative;
top: 1px;
}
This is what is displaying: http://imgur.com/XungDOU
This is what I want it to do: http://imgur.com/XHXTKae
Try this:
.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}

unwanted navigation stack with browser resize

It's my first time here on the forum. I am a beginner in webdesign and encountered a problem I could not find correct answer to. So far I searched for my answer on mutliple sites but the closest to my problem was this;
Horizontal to vertical menu, on browser window resize.
My problem is as followed: my nav ul list gets stacked when I resize my browserwindow to small....I know it must be possible to let it all stay horizontally on a desktopscreen as it is...like on the page of APPLE store for example. I just have no clue what I am doing wrong.
Underneath is my code....hopefully someone can help me and filter out my errors.
HTML
<div id="navcontainer">
<div id="navlist">
<ul>
<li id="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
CSS
body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}
/***** HEADER *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}
/***** NAVIGATION *****/
#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }
#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}
#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }
#navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}
#navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}
#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}
#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }
#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}
#navlist li a:focus {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}
I had this same problem with my navigation. My nav wasn't structured exactly like the solution below but applying the CSS accordingly worked great.
Here is the solution I found.
http://jsfiddle.net/9x7Am/5/
HTML
<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>
CSS
#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li {width:100%}
li a {padding: 6px 0; float:left; width:16%; text-align:center;}

Resources