<p-multiSelect> accessible without header - accessibility

my p-multiSelect element is working and is also accessible. But I don't want the search Header Option so I did:
[showHeader]= false;
which is also working but now the p-multiSelect element is not accessible anymore as I can't reach it with the keyboard anymore.
Any ideas how I can fix this?

Related

How can I change the options that `iframe-resizer` is using?

I have an iframe on my page and I'm using iframe-resizer to have it resize to match its content. I'm using the maxHeight option to limit its size. This is working fine.
However, sometimes I want to change the value of maxHeight, in response to actions in the parent page.
I've tried calling iframeResizer(newOptions, myIframe) but this doesn't seem to change anything - the old options are still in effect.
Is there a way I can change the options on the fly?
The options you pass to iframe-resizer are not changeable after it has been setup.

Codeceptjs doesn't load most elements, waitForNavigation() just causes it to freeze forever

I am having an issue testing with codeceptjs. I am attempting testing apps on the Atlassian cloud but codeceptjs/puppeteer cannot interact with any of the elements on the page. When I enable screenshots I see it is on the right page but codeceptjs can only find the elements in the navigation menu. it cannot even find the body element either by selector or xpath.
I tried adding I.waitForNavigation() but the tests never advance past that step. I tried to set a timeout in the config section as they say in the docs here but I am having no luck. I tried everything they suggested but it just waits there forever. if I comment out I.waitForNavigation() it will fail because it cannot find a Boyd element. I am using the default config file that gets created when you install codeceptjs in a directory. this the code I am trying to test but it is causing all kinds of issues.
I.amOnPage('https://artemis-test2.atlassian.net/wiki/plugins/servlet/ac/com.nurago.confluence.plugins.treecopy/copy-page-tree-confluence?page.id=25821196&space.key=TEST1');
I.waitForNavigation();
// if I don't comment this out it will wait here forever
I.wait(4);
I.waitForElement('.ap-iframe');
// it can find the iframe for some reason but nothing else
I.waitForElement('.body');
// if I do comment it out it fails here because it says there is no body element. can't find it by xpath either.
I have no idea why this is happening. any help is greatly appreciated.
amOnPage with default config runs navigation and passes after navigation.
waitForNavigation will start to wait navigation after navigation. So it never happens, if you will not run navigation again or page redirect starts.
You have 2 choices:
not to use waitForNavigation and use amOnPage only.
use waitForNavigation and amOnPage within Promise.all: await Promise.all(I.waitForNavigation(); I.amOnPage(pageUrl));

Css background Wont work?

I have a question.
I am currently building a "blog" website. Not that it matters but..
I am trying to set my background to be a specific image that i have.
And it used to work! Until recently and I just don't know why it wont.
It works when i am on my computer, everything works fine.
But i am using 000Webhost as the hoster for the website.
So if u go to "http://pontuslundhblogg.uphero.com/"
You might see that the website is completely white. Cause the picture wont load for the background.
In my css sheet, i am using:
body {
background-image: url("bakgrund.jpg");
And yes, i did name the picture bakgrund.jpg and uploaded it to 000webhost. Its the exact same name etc. I wondering.. Could two different css stylesheets make so it gets weird or something? Cause I added a second css style sheet to be able to have a drop-down menu in a different sheet, and i added the drop-menu. Around that time it started messing with me..
Is it me doing something wrong.
Or is it 000Webhost?
(Might add that none of my pictures is working now, i can also contribute with more code if needed!)
If you go to pontuslundhblogg.uphero.com/bakgrund.jpg you get a message
"The image pontuslundhblogg.uphero.com/bakgrund.jpg cannot be
displayed because it contains errors".
If you go to pontuslundhblogg.uphero.com/bakgrund1.jpg you get 404 page, which means that the first path (bakgrund.jpg) is correct - but the image itself isn't good.
Try to upload it again or contact the hosting service.
If you use FTP maybe you need to change something in your FTP program settings - maybe change from ASCII to Binary transfer.
http://www.inmotionhosting.com/support/website/file-management/corrupt-file-ftp-transfer

Chrome inline background-image lost on back-button in Chrome

I have an inline style on element on one of my templates.
- hero_image = article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
It works marvelously for me. Except when I go to another link and the use the back button to return the page.
When I use the back button to return the page, the inspector the source is the exactly the same, but no image. When I refresh the page, same code, but the image is there. Seriously weird and annoying.
I've seen reports of this being a bug in Chrome related to background-attachment:fixed; but the work arounds they suggest don't work.
Is there a way to force (via Turbolinks?) this element to refresh?
It turns out that the issue is fixed by adding the base url to the url like so:
- hero_image = base_url + article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
(I added a base_url helper thanks to this: https://stackoverflow.com/a/2952576/1291663)
I've run into the same problem on my app, trying to display user avatars.
There are (many) bug reports related to this particular situation dating back a couple of years, but the bug is still present as of time of this writing.
The solution I've gone with is to replace the background with an actual img tag, and than use z-index tricks to push it back.

Fake the src of an iframe for printing to avoid "about:blank"

I'm creating a hidden iframe specifically to be used for printing in IE6.
Here's a basic outline of the code with some HTML population cut out:
$('body').append('<iframe id="printIFrame"></iframe>');
$("iframe#printIFrame").attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
$("iframe#printIFrame").load(function()
{
document.getElementById("printIFrame").contentWindow.document.title = "My Title";
var iframe = document.getElementById("printIFrame");
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("iframe#printIFrame").remove();
});
This is working quite well, except for the ugly "about:blank" that shows at the bottom left hand of each printed page. I guess since I'm making this iframe on the fly the source (as IE6 sees it) is about:blank. Is there any way to fake the src or change what gets printed there? I tried setting the src right before printing, but obviously that changes the iframe to a new page and prints that. Any ideas?
You can not get this done without changing the src ahead of time, like you described. This is IE we're talking about. It's the single browser least likely to support anything fancy it could get away with not supporting.
(Though, for the record, I haven't heard of being able to override print metadata in any other browser, either.)
I did find an ActiveX plugin which claims you can modify the header/footer of the printout on the fly.
http://www.meadroid.com/sx_intro.asp
Alternatively, it can be changed permanently by going to Page Setup from the File menu in IE6. However I'm trying to avoid an ActiveX plugin if possible; I'm wondering if there is an easy way to change the header or footer through javascript. Any other ideas?

Resources