In my attempt to develop a website using Material Design, I encountered an issue with the Material Select component. Whether I utilize MDB (Material Design for Bootstrap) or the Materialize CSS framework, both function well on Windows/OSX/Android devices. However, upon opening the Material Select component on my iPad and clicking on it, a blinking cursor appears from the background of the dropdown.
Give this code snippet a shot:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
Encountered a similar problem with iOS devices while utilizing the select dropdown from materialisecss "". In order to resolve the blinking cursor issue, I referred to the code provided in the link below and made some modifications.
Reference Link: https://github.com/Dogfalo/materialize/issues/901 (specifically, check out the comment by "chi-bd" dated 17 Nov 2015)
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
Use jQuery('select').material_select(); to initialize materialise select, the remaining code addresses the issue.
The challenge encountered was that it caused problems in desktop view, so a condition for mobile detection was added:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Ensure to include this code within $(document).ready(function() { ... });
This should resolve your issue effectively. Best regards, and have a wonderful day :)
An unresolved problem has been identified on github, where user @StaticBR suggested a solution for the "Dropdown Broken on iPhone (and Safari in general)" issue, available at this link.
As per @StaticBR's explanation,
"The problem arises from IOS13 Safari propagating TouchEnd Events before the Click event is propagated. If there is a click listener within a drop down, it may not trigger correctly as the Dropdown gets closed by the TouchEnd event first. Subsequently, the click event occurs in a different position or doesn't happen at all. By removing the touch event listener, I was able to resolve this issue."
Regrettably, the code provided initially works but it causes the drop-down scrolling to stop.
Currently, I am implementing a temporary fix where the blinking cursor is shown first and then hidden. However, this solution is not ideal. If anyone has a better alternative, please share it here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
I am faced with a dilemma involving two div elements structured as follows: <div id="left"><p>.....</p><br/> <p>.....</p> </div> <div id="right"><img ..../></div> Accompanied by CSS styling: #l ...
I've encountered an issue with my CSS code. It seems to be working fine until the @max-width:767 media query, but then it stops working on the resolution immediately below it, which is @425. However, it starts working again on resolutions below that. ...
I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...
I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...
Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...
I am trying to organize my data for display in a TableView. I have three sets of arrays: Category Arrays Album Arrays Track Arrays Each Category may contain multiple Albums, and each Album may contain multiple tracks. I am looking for suggestions on ho ...
I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...
After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...
I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...
Check out this Fiddle When the mouse hovers over the element, an opaque "cloud" appears and I want to completely hide the underline that is normally displayed. The underline is created by using a border-bottom on the parent div. .element_style{ width ...
I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing. There are two DIVs in my code that I toggle between showing and hiding using Javascr ...
Hey there! I admit that my website may not be the greatest, but bear in mind that this is just a school project page. My current issue is with the mobile view styling - the hamburger menu should replace the nav bar on smaller screens, but it's not wor ...
I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...
In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...
I have recently developed a Markdown editor using Vue, similar to the examples found on Vue's website. However, my query is more related to implementation rather than Vue itself. Therefore, I am open to suggestions that do not necessarily involve Vue. ...
Utilizing Bootstrap Nav Tabs and Tab panes on my website has been a smooth process. However, I am encountering some difficulty in adding extra links that not only activate the Tab Panes but also scroll to them. The issue seems to be related to a specific l ...
I recently added Install-Package bootstrap.sass to my ASP .net core 3.1 project. After installation, I noticed that it included both the bootstrap.js and scss folder. However, I'm unsure of how to compile the bootrap.scss file and implement it in the ...
While using <ion-slide-box>, I am encountering a strange issue. Everything looks fine on the browser and Android devices, but on IOS 9.2, it either duplicates or breaks with the error "duplicate index". I have set the track by in this way: <ion-s ...
I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too ...
After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...