I am experiencing an issue with Bootstrap Dual Listbox wherein both the selected and non-selected lists are superimposed with a "0 selected" message in Chromium-based mobile browsers. The lists are not visible but are selectable by tapping on the down arrow on right side of the respective controls. Please note, this behavior is not observed in Firefox nor is it a problem in Windows-based Chromium browsers.
I have included the following screen shot for illustration purposes:
The screen shot is taken from Google Chrome on a Samsung Galaxy S8+ running Android Pie.
I have validated that the non-selected list is refreshed and options are selectable via the down arrow on the right side of the control. Likewise, after selecting and moving an option, the option is visible in the selected list by tapping on the down arrow on the control.
My constructor for each instance of the plug-in is as follows:
$("#CrewMembers").bootstrapDualListbox({
showFilterInputs: false,
infoText: false,
moveOnSelect: true,
infoTextEmpty: false
});
I am new to Bootstrap Dual Listbox and I would like to continue using it. Any assistance would be greatly appreciated.
UPDATE (7/23/2020):
I replaced the Bootstrap Dual Listbox plug-in with an equivalent jQuery/Javascript plug-in (jQuery Dualselect) and got the same result. This issue appears to reside with Chromium and not the plug-ins.
An issue has been submitted to the Chromium development team.
Related
For our web application I wrote one selenium script, which is working very fine in my office workstation (which has big screen).
When I execute the same script for the same application in my laptop(which has small screen) it is not able to find the element.
Actually when I open the application in my laptop some elements are visible only when I scroll down the page but those element are visible in big screen without scrolling. Application view is automatically adjust as per the screen.
So, for these application how I can write the selenium script so that it will work any kind of screen ?
What do you mean by "it is not able to find the element"? Which error did it show?
In my own experience with automation, in some specific scenarios, the behavior of the app change when the scrollbar appears (for example, when I try to click on an element, it scrolls down to that element, but "jumps up" to the element above it - this I can reproduce manually.)
Some test scenarios are quite sensitive with scrollbar, for example drag&drop.
You should analyse each failed test separately and find a solution for each case.
Selenium cannot find element that is not visible, you must always check if element is visible and if not scroll to this element.
see this question Scroll Element into View with Selenium
I am working with IE11. After loading my website elements like checkbox, radio button, drop down arrow get automatically hidden then after hover on them they get visible then after click anywhere in page they again get hide. All this element are present and style are applied tested with developer tool but still they was giving problem. Then after check "use software rendering instead of gpu rendering" option from settings->Internet option->Advanced->"use software rendering instead of gpu rendering" everything got ok. Now my website element not getting hide all style applied perfectly. But I doesn't understand why this happen? How this setting fixed issues. Please any idea help!
I built a small wxFrame GUI, originally on Linux using CodeLite+wxCrafter, but on Windows the controls are not visible until I click on a notebook page and back, or resize the form, or hover the mouse over a control. I created a new Windows CodeLite+wxCrafter project and it does not display this issue. I tried comparing all the details between the two projects to see what differences there were, but couldn't find any that fixed the issue. I'm puzzled.
For example, this is what I see when I run the app:
After clicking on the Advanced Page and then back to the Run Page or resizing the form, this is what I see:
Or if I hover my mouse over say a wxButton (Open) it shows up:
This is what it should look like, after I click on the Advanced Page and back to the Run Page or resize the form, and then hover my mouse across all the text controls.
Any ideas what the display issue is?
I created the following jsbin to show the problem. http://jsbin.com/fewuli/2/ If you run this in any browser but IE10 and focus the input then the box shadow outline looks great like this:
But if you run this in IE10 (or IE9+) it doesnt render the top portion of the box shadow on focus like this:
Is there any way to fix this without increasing the box shadow size (last option?)
I tested the link you provided and checked it out in different versions of IE (11, 10 and 9) and they all showed the input box being highlighted when it held the focus. (I used the IE toolbar Emulation to view the differences)
If you are still having problems with this you could try adding a script that helps older IE browsers support HTML5. Modernizr is one of these scripts that will help in this way. There is also HTML5 Shiv but that only supports IE browsers 9 and older.
Another suggestion would be to try MS Visual Filters and Transitions and apply it to your INPUT class:
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
I have created tab panel and I have used iconCls property to show different icons on tab buttons. This works fine on chrome browser on desktop and on safari on iPad. But these icon images are not displaying on andorid tab, instead it displays blank square.
Inspect the element in chrome and also look at the console log. If you are debugging, then it may work in the web browser but will tell you what error has occurred.
Otherwise, make sure your stylesheet is linked correctly in android and try using the default iconCls classes to see if those work. If you are creating a custom one and not using sass, then you probably are not linking the actual icon file correctly.
Otherwise, provide the code for the tab buttons your custom css if you are using any.