I'm trying to upload an image in https://my.gumtree.com/postad but it doesn't' work and doesn't give any errors either.
This is how image component looks like.
This is the html source for this component:
<div id="html5_1e23hbscjgte1ni1goba4orb2_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 8px; width: 130px; height: 100px; overflow: hidden; z-index: 0;"><input id="html5_1e23hbscjgte1ni1goba4orb2" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,.jpeg,image/png,.png"> </div>
This is the code i'm using. I tried both
const fileInput = await page.$('input[type=file]');
await fileInput.uploadFile('./img1.jpeg');
and
const inputUploadHandle = await page.$('input[type=file]');
inputUploadHandle.uploadFile(...['img1.jpeg']);
But doesn't work.
I also tried using full paths but no luck.
Can someone please point out what is the issue here?
Related
I'm developing a system in Vue, where it displays an image, and I mark it up, using vue-konva. However, I am not able to transform this image into a blob to send to firebase.
My code is here:
let canvas = document.getElementsByTagName("canvas")[0]
console.log(canvas)
canvas.toBlob((blob) => {
sendFirebase(blob)
}
print:
<canvas width="1280" height="720" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1280px; height: 720px; display: block;"></canvas>
It doesn't show an error message, but it doesn't work.
I think you may not be able to get the image on the 'canvas'.
I'm using https://www.npmjs.com/package/opentok-react in my application and creating a publisher and subscriber in a div. This is the css:
#videos {
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: auto;
z-index: -100;
min-width: 100%;
min-height: 100%;
overflow: hidden;
//min-height: 720px;
//margin-left: auto;
//margin-right: auto;
}
#subscriber {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
right: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}
The problem is when I pass the subscriber component the props width 100% and height 100% it doesn't obey, it doesn't do what I expect. I expect it to use the full height and widdth of the div with the #subscriber id selector. However it doesn't. Instead if I pass the props as a px value it works. How can I just make the subscriber video componet fit to the size of the container div based on a percentage?
TokBox Developer Evangelist here.
When creating publishers and subscribers, the Opentok-React library assigns the OTPublisherContainer and OTSubscriberContainer classes to the DOM elements so please use them to style to publisher and subscribers, respectively. You can see this in the library code here:
OTPublisher
OTSubscriber
I've also gone ahead and filed an issue on the repo to improve documentation on styling.
I've tried a number of solutions but with no success.
Here is a simplified page demonstrating the problem.
I fixed it.
I found the solution after finding a similar problem with a page using html5 columns. The modals would work in the first column but not in the second. I found that the modal static position overlapped the position of the link-image in the second column though it was not visible.
In the original problem I changed the css from:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: 50%;
}
#modal1:target {
opacity: 1;
}
To this:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: -1000px;
}
#modal1:target{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 1;
width: 40%;
top: 100px;
left: 50%;
}
Now the modal static position is well off the page and is no longer where it can be clicked.
I realize this was a noobie mess-up but I finally got it.
Roy
Im working on some CSS with a web app that I am doing, and I have finally got what I want my page to look like encoded in the css.
#searchNavBar {
position: relative;
width: 100%;
left: -53%;
top: -40px;
height: 70px;
}
#searchResultsDoodle {
position: absolute;
left: 0px;
top: 10px;
width: 100px;
height: 50px;
}
#searchResultsSearchBar {
position: absolute;
left: 110px;
top: 10px;
width: 690px;
height: 50px;
}
#searchResultsSearchButton {
position: absolute;
left: 810px;
top: 10px;
width: 100px;
height: 50px;
}
So I've got a navbar type thing along the top, with a picture, search bar, and a button. Actually taken heavy inspiration from google ;)
Things look good now, however, when I do a "ctrl+", increasing the size of the page, the formatting gets thrown completely off, the search bar drawn to the center of the page, etc... is there any way to write the CSS for this code such that, in the event I increase or decrease the size of the page, the things on the page will attempt to stay as close as they can, proportionally speaking, to the locations that I initially wanted them on the page?
So I have tried copying countless other posts about aligning gauges and divs on top of each other using z-index and positioning but as of yet I still havent been able to accomplish it.
I currently have this(ive tested in IE and chrome with same results):
<div id="gauges">
<div id="loggedInGauge"> //gauge creation code </div>
<div id="loggedOutGauge"> //gauge creation code </div>
<div id="onBreakGauge"> //gauge creation code </div>
</div>
<style>
#gauges {
position: relative;
}
#loggedInGauge, #loggedOutGauge, #onBreakGauge {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200px;
height: 200px;
}
#loggedOutGauge {
z-index: 10;
}
#onBreakGauge {
z-index: 20;
}
</style>
Can anyone help to get the gauges on top of each other so that it looks like one gauge with three pointers?
Here is what the current output is: Imgur link to current output
Change the CSS definition to:
#loggedInGauge, #loggedOutGauge, #onBreakGauge {
position: absolute !important;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200px;
height: 200px;
}
Kendo UI defines the position por each gauge as relative overwriting your definition. Adding the ! important to it, we prevent this to happen.
Example here : http://jsfiddle.net/OnaBai/wNsRY/