Can't reach inner document in object tag in React - css

I'm trying to make a preview of a pdf document using only the object or iframe tag.
My goal is to remove the toolbar and the scrollbar and correctly move the file to have a good looking image of my first pdf page. For such needs I need to apply css to some part of my document like "#outerContainer #mainContainer div.toolbar".
The problem is that I can't reach those components and I don't understand why.
I have tried to apply directly new class to the component but nothing happened or to switch to iframe tag.
I also went through different topics like this one : Access <object> data with JavaScript and I saw that my contentDocument is undefined
Here is a link to a sandbox demonstrating my attempt to access the inner document:
https://codesandbox.io/s/keen-cloud-z9gtf?file=/src/PDFObject.tsx
Thanks for your future help !

Related

Cypress.io cannot find any element, body or class

I've started testing a .jsp page which includes iframes.
After visiting the page it cannot find a single element, img, class etc etc.
Even using the playground selector it doesn't seem to recognize any link or elements.
I'm unsure if I need to target the iframe first or not.
Below is a recording of the playground selector not finding anything.
https://recordit.co/aQC6Awpxwy
I've added a screenshot of some source code below to help if anyone has any suggestions I can try.
Looks to be #Documents embedded inside of iframes, I have no idea where to start.

User agent stylesheet setting script code to display none

Trying to get a code generated by Crowdriff to display a gallery on a page and it is being blocked with css that I am not defining as display none. I'm not sure where this is coming from as I haven't set it anywhere to display none.
Screenshot of problem
Here is the page where it should be showing:
https://www.orillialakecountry.ca/test-gallery/
Script tags are never displayed. These are used to import and execute javascript files.
In the javascript a HTML element is probably targeted in which it tries to inject it's HTML.

Ace Editor does not work in Iframe (react-frame-component)

tl;dr Demo of Issue
I'm attempting to integrate Ace Editor in an iframe via React 16. I am using the react-ace component library, though this issue exists if I implement the editor natively as well.
Although everything mostly works when I wrap the editor in react-frame-component, I cannot select highlight text which makes the editor unusable. I suspect this may have to do with the fact that react-frame-component is implemented with Portals, but I'm not sure exactly what the issue is.
I've replicated the issue here. I don't think this problem exists if I loaded the component with a regular <iframe src /> from another domain.
react-frame-component keeps the code in the parent window, and adds elements into an iframe, which confuses mouse handling code in ace to add event listeners to a wrong document
adding var document = el.ownerDocument before
https://github.com/ajaxorg/ace/blob/v1.4.10/lib/ace/lib/event.js#L111 would help.

Increase size of Facebook Like Button

I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework

seam-gen and flex

I have integrated seam and flex with FlamingoDS
I got html file from mxml file and I stored it in WebContent folder it's fine
then I want to create link named as 'Plan' in menu.xhtml
My aim is to get that html file when i clicked on this button I don't know what to do for that
so, I have created some test.xhtml in that top element is the
for the template attribute this element I have given the template.html
and I used
then for 'Plan' link I gave the view="/test.xhtml"
It's fine when I clicked on that link I am getting the test.seam file which includes our html file but this html file is coming in some fixed area with scroll bars only eventhough there is a lot of space to fit
Please help...... me
First of all, it is very difficult to read your post. Please format it more readable.
Secondly, we can only guess what's wrong when we cannot see any code. But my hunch is that you are using s:decorate that includes some formating you are not aware of. This comes in standard seam-gen. Try removing that s:decorate stuff or point to another style you wish to use.

Resources