Develop Reference

Change canvas style size inside several browser windows using python

I have several browsers open and each has a webpage already open that has some div and canvas elements.
<div class="webgl-content">
<div id="game" class="game" style="padding: 0px; margin: 0px; border: 0px; background: rgb(25, 39, 54);">
<canvas id="#canvas" style="width: 100%; height: 100%; cursor: default;" width="1400" height="800"></canvas>
</div>
</div>
How can I change the height:100% to a different value (say 77%) in all browser windows using python?
I am thinking something that can identify the open browsers, then find the canvas element and change the style height percentage to a new value.
I've been playing around with pywinauto library but not much progress so far: I get errors indicating that Chrome application was not found.

How to place two smaller buttons beneath a bigger button - html, css

I have been trying to make a website from scratch using the django framework in Python. I am trying to make a split screen landing page and on each side, I want three buttons: Read More, Sign up, Log in.
I want the "sign up" button and "log in" button to be underneath the bigger "read more" button, but I have been unsuccessful for many hours. I am very much a beginner in web development so please forgive me for any silly errors.
Code for buttons "Read more" and "Sign up"(so far):
.button {
display: block;
position: relative;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
<div class="container">
<div class="split left d-flex justify-content-center align-items-center">
<h1> The Business </h1>
Read More
<div class="Buttons">
<div class="SignUp">
Sign up
</div>
</div>
</div>
<div class="split right d-flex justify-content-center align-items-center">
<h1> The Artist </h1>
Read More
</div>
</div>
This is the way the sign up and read more buttons are currently showing on one side of my split screen (I have not done the other side yet
EDIT: This is the way I want my buttons to look

Well I edited a bit on your CSS for the buttons and your HTML structure for <div class="Buttons">. That way all 3 buttons are inside the same wrapper and will be displayed like your image suggest.
I changed the block type to inline-block. Certainly there are other ways, but this works without to much switching on your code.
I also deleted your positioning and transform as they are not needed.
Next I swapped your link class buttons to an unique class name for the different buttons. I adress the styling through its parent and use the class name to style the width.
Last but not least, I added margins to get some spacings between the buttons.
h1 {
text-align: center;
}
.Buttons {
text-align: center;
}
.Buttons a {
display: inline-block;
height: 2.5rem;
padding-top: 1.3rem;
text-align: center;
color: black;
border: black solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.readMore {
width: 30rem;
margin-bottom: 10px;
}
.signUp,
.logIn {
width: calc(15rem - 10px);
}
.signUp {
margin-right: 10px;
}
<div class="container">
<div class="split left d-flex justify-content-center align-items-center">
<h1> The Business </h1>
<div class="Buttons">
Read More
Sign up
Log in
</div>
</div>
<div class="split right d-flex justify-content-center align-items-center">
<h1> The Artist </h1>
<div class="Buttons">
Read More
</div>
</div>
</div>

I dont think that you need all that positions. The only thing you need is sizes of the buttons. The Read More button should be given a bigger size and the other buttons should be given smaller sizes. Then you can apply margin-left: auto and margin-right: auto to place the buttons in center.

Corey Schafer Django (Part 3): HTML not formatting right

So I'm going through Corey Schafer's Django series, and I'm at the part where he is building the HTML template for the website and for some reason it isn't formatting correctly. I downloaded his repository and re-ran his code and still got the same error? The only difference that I can think of is that he is using Django 2.1 and I'm using Django 3.0 but that shouldn't be it.
Here is how it looks:
Here is how it should look:
And lastly this is his Github for the link: https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog/03-Templates
Edit: Got it working. You have to do four steps:
(1) Delete integrity and crossorigin from this line in the base.html (line 11)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
To get this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
(2) Update your static/blog/main.css with this code:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
(3) Update your templates/blog/home.html with this code:
{% extends "blog/base.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
(4) Close your server, and clear your browser from everything (cookies included)

Solution: A small change in your "main.css" file, add !important at the
end of color hash as:
.bg-steel {
background-color: #5f788a!important;
}
=========================================================
Explanation:
You will have to understand the concept of overriding of CSS.
If a component is loading with "!important" in the parent CSS such as:
background-color: #5f788a!important;
instead of just:
background-color: #5f788a;
In such cases, you will not be able to override it in your custom/child CSS because !important declares it important and can't be overridden directly.
However, you can still override it in the custom CSS by applying !important at the end of the value of the component just the way I did above.
====================================================
You may be confused about Why did it work in Corey's CSS ?
Answer: The version of bootstrap Corey used in the tutorial was not rendering the background-color with the term !important at the end and hence he was able to override it directly. But nowadays, bootstrap color classes render with background-color: #5f788a!important; and hence can't be overridden directly.
Hope I could help you out.
Thanks
akaroshaa#gmail.com

Right now I'm fully suspecting something is wrong with your custom css.
First reason: bg-steel is not a default color, so you need to write it somewhere else. However, even with the line below, the navbar didn't show up.
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
Second reason: for a division to have a border, header, and content with margins applied, you either use a default card class or you implement one on your own -- found in this line, which also didn't work.
<article class="media content-section">
Third reason: obvious enough, the background colors are different. In your code, it's pure white, which is what bootstrap's default comes with. If the custom sheet is applied, the background color will then look darker.
Here's what I'll suggest you do:
Go to your HTML or settings.py (if you used {% load static %}) file and check whether your static or import paths are correct
Go through the video one more time and make sure you have no typos.
As a matter of fact, the javascript files ARE necessary. If you don't include them, things like dropdowns and modals won't work properly.

Not able to click on drop down option in a ajax webpage using selenium python

I am able to click on the drop down heading but not able to click on the options. Also I am not able to identify the 'id' or xpath for options which is visible after clicking the dropdown option.
Find the HTML below:
<div id="object260310" style="position: absolute; overflow: hidden; background: transparent; z-index: 50; left: 154px; top: 5px; width: 74px; height: 20px;">
<div id="object351" style="position: absolute; z-index: 11; left: 0px; top: 0px; width: 74px; height: 20px; background-color: rgb(255, 255, 255);">
<div style="position: absolute; width: 42px;">
<div role="menu" aria-label="1" class="font89" style="padding-left: 0px; cursor: pointer; position: absolute; left: 0px; color: rgb(126, 126, 126); width: 43px; height: 20px; line-height: 20px; background: transparent;" onclick="plw.menu.click(this,351,0,"1",true);" onmouseenter="plw.menu.over(event,this,351,0,"1");this.style.color="rgb(174,174,174)";this.style.backgroundColor="rgb(255,255,255)"" onmouseleave="plw.menu.out(351);this.style.background="transparent";this.style.color="rgb(126,126,126)";">
<div style="position:absolute;left:0px;top:2px" class="image347 "></div>
<span style="position:relative;left:21px;top:0px">New</span>
</div>
</div>
</div>
</div>
Below is my selenium code:
new_create = WebDriverWait(driver, 40).until( EC.presence_of_all_elements_located((By.XPATH, '/html/body/div[2]/div[2]/div[5]/div/div/div/div')))
driver.find_element_by_id("object260310").click()
#its working fine till here
driver.find_element_by_xpath(".//*[contains(#onclick, '231')]").click()
#This line doesnt seems to work.
And here is a screenshot of the site.

Clicking drop down options have been iffy for me before. This is a thing I do when there aren't any other solutions:
Click the drop down then you can send keys depending on the letter of the option you need. so if an option is "action" then you press "a".
This highly depends on what you have in the drop down though.
EDIT: I would highly look at all the related questions there... They have some stuff you might be able to use. As I said this is only if those don't work!

You can try to click on the drop-down first(New in your case)
If the dropdown is not select , then use the below code select the value.
driver.find_element_by_xpath("//div[text(),'Product Variation']").click();

driver.find_element_by_xpath("//div[contains(text(), 'Product Variation']").click();
Think the xpath should be written that way. Will you send me the URL and I'll make sure I can click before I make another edit on this post?

Thank you all for your help. I was able to find the xpath using chrome XPATH Helper extension.Extension gave below xpath :
/html/body/div[#id='m235e0-SUB-1']/table[#class='oldmenu']/tbody/tr[#id='235-0-SUB-1-1']/td[#class='oldmenu']
Using this I was able to identify the id for sub menu i.e. '235-0-SUB-1-1'
So I modified the code accordingly as below :
driver.find_element_by_xpath('//*[#id="235-0-SUB-1-1"]').click()

xhtml2pdf child elements show border of parent elements

Hoping someone may have solved this problem. Haven't seen anyone with it on Google.
I'm using xhtml2pdf in Python, trying to generate a simple document with a header, footer and my content is blocks of text with titles. I'd like to have a border around each piece of content but instead I get borders around each child element instead.
Here's my HTML
#page {
size: letter;
border: 0;
#frame header_frame {
-pdf-frame-content: header;
border: 0pt solid white;
left: .75in;
width: 7in;
top: .5in;
height: 1.5in;
}
#frame content_frame {
border: 0pt solid white;
left: .75in;
width: 7in;
top: 1.5in;
height: 7.5in;
}
#frame footer_frame {
-pdf-frame-content: footer;
border: 0pt solid white;
left: .75in;
width: 7in;
top: 9.5in;
height: 1in;
}
}
h1 {
padding-top: 5pt;
}
.desc {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
border: 1px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TEST TEST TEST</title>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="footer">
FOOTER
</div>
<div class="desc">
<div class="title">TITLE OF ARTICLE</div>
<span>TEST 2</span>
<div>TEST 3</div>
<table>
<tr>
<td>Test4</td>
<td>Test 5</td>
</tr>
</table>
</div>
</body>
</html>
I'm just running the xhtml2pdf command line tool at the moment so there's no python to show. One thing I did notice when I run it in debug mode it shows "xhtml = false" even though I have an XHTML DTD. I'm not sure if this would make a difference.
Here's what I see in the browser and roughly what I expect the pdf to look like (ignoring the footer location of course):
Instead I get:
EDIT: I figured out that xhtml is an option to pass but passing it fails unless one has an old version of html5lib installed. Looks like the answer to my question is this library is not being actively maintained and I need to find a new solution :-/