Concealing certain options in an iOS select list using CSS or Script

Currently, I am facing an issue with my web application where a select list is dynamically generated using javascript. The options in the select list are taken from an existing menu list within the DOM.

Upon testing on iOS devices, I discovered that CSS styles specifically targeting select lists are being ignored. For instance, I have a media query set at max-width:768 to hide a particular item within the select list when viewed on screens 768px and lower.

Despite working correctly in device emulation tools like quirktools/screenfly, the display:none property is not being applied when the select list is viewed on an actual iOS device.

Does anyone have any recommended workarounds for this issue?

jqueryioscssresponsive-designnavigation

Answer №1

In order to address this issue, I opted to incorporate a conditional statement within the jQuery code to prevent it from being included in the option list.

Since the select element is only visible on devices with a width of less than 768px, there was no requirement to utilize media queries or check the window width.

Consequently, the menu item is never appended to the select list, ensuring that any CSS overrides specific to iOS selects do not create any conflicts.

$("nav.main li a").each(function () {

    var el = $(this);
    var elt = el.text();

    // Removing the extra » symbol
    elt = elt.replace("»", "");
    if (elt != 'Hide This Menu Item') {
        //Continue building select option list
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

iOS Version Needed for iTunes Search API

I am currently working on a project that involves retrieving the supported devices list, similar to the one found in the current Yelp App. The list could potentially look like this: ["iPhone4S", "iPhone5s", "iPadMini4G", "iPodTouchourthGen", "iPadFour ...

iositunes-search-api

Interested in an issue related to Bootstrap 4 using Flexbox?

1- Seeking advice on an issue with the Header Section not following centering classes (d-flex justify-content center) in Bootstrap 4. Unable to center the text as desired. 2- Font Awesome displays oddly, looking to create a circle around it similar to a l ...

htmlcssbootstrap-4

The auto-fill feature in typehead.js is not functioning correctly for predictions

Trying to implement an autocomplete field using typehead.js () : $(document).ready(function() { var result; var result = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); ...

javascriptjquerytypeahead.js

Why is Property CSS of Undefined Giving Error?

var random; var squareArray = [$('#square1'),$('#square2'),$('#square3'),$('#square4')]; var randomOrder = []; var i = 0; var j = 0; function computerPlays() { random = Math.floor(Math.random() * 4); randomO ...

javascriptjquerycss

Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

I would like to create a banner similar to the one shown here: https://i.sstatic.net/SZLr9.png I am attempting to achieve this using 'absolute' or 'fixed' positioning. However, when I tried using 'left: 0 right: 0 top: 0', i ...

cssreactjsmaterial-ui

Creating a sleek horizontal drop-down navigation menu using Bootstrap 5 and CSS

Attempting to design a horizontal dropdown menu for small screens has been a challenge. However, all the resources I've come across seem to be outdated and ineffective. ...

javascripthtmlcssbootstrap-5

My navbar has an empty space that I want to fill. I aim to move the search bar all the way to the right - any suggestions on

https://i.sstatic.net/SvTiG.jpg This is the code for my navbar customization: <nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav"> <div class="container"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to Stop Screen Capture on iOS Using Code

Hey there! I've recently created an iOS app that includes sensitive videos and pictures. I'm looking for a solution to prevent screen capturing of this content. Is there a way to secure these files and prevent apps like iRec from recording them? ...

iosiphonescreenscreenshot

What is the best way to keep a heading anchored to the bottom of an informative hover container when using a transform scale effect?

I'm trying to make the title stay at the bottom of the hover box when a user hovers over it. I want the hover box to appear with the title always at the bottom, and close upwards from the title as the description covers the entire box. How can I achie ...

css

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

The CSS Grid extends vertically beyond its bounds, rather than activating the overflow-y property

Why does the grid blow out in the following snippet? The grid has a lime green border, each child has a dotted red border, and you can see the dotted red extends beyond the lime grid border. The .child2 should be made scrollable to prevent the grid from bl ...

css

Expanding Table Rows in DataTables

Currently, my DataTable has hidden child rows to display additional information. Each parent row represents a gift card, while the hidden child rows show a log of that gift card. A gift card can have multiple logs. For example: Gift Card 1: 0 rows; the ...

phpjqueryhtmldatatables

What causes the inconsistency in time intervals in the loop?

My goal was to create a simple slider that loops through 3 images, with each image staying visible for 3 seconds before fading out and the next one fading in. However, I encountered an issue: The first image can stay for 3 seconds, but once the loop star ...

javascriptjqueryhtmlcss

How can I distribute the main project pod to multiple frameworks in Swift?

I currently have a Main Project A along with several customFramework, such as B and C. Within Main Project A, all necessary pods are included. I need to share these same pods with customFramework B and C without having to implement them individually for ...

iosswiftxcodeframeworksxcframework

I'm having trouble getting jQuery to work properly with Bootstrap buttons

In simple terms, my objective is to have two buttons on a page where "1" is displayed when the first button is pressed and "2" is displayed when the second button is pressed. This functionality works fine with radio inputs, but when I incorporate button la ...

javascriptjqueryhtmltwitter-bootstrap

Steps for designing a UITableCell with multiple subtitles

After stumbling upon this design image online, I find myself intrigued by the idea of creating a UITableCell with multiple subtitles that can be customized like the example in the picture. From my current knowledge, it seems that only one subtitle can be ...

iosobjective-cxcodecocoa-touch

The useCallback function is not producing the desired outcome in my code

Upon reviewing the code, it is expected that the useCallback hook triggers the display of the message 'rerendering has happened!' only when typing in the input field, and not when clicking on the Toggle button. However, the message does appear fo ...

javascriptjqueryreactjsmaterial-uifrontend

Leveraging CSS selectors for selecting odd and even elements

Can anyone offer some insight into my CSS odd and even selector issue? I can't seem to figure out how the gmail-message-wrapper is being targeted in my code. I want the 3 gmail-message-container elements to have alternating colors, but it's not ...

css

Dragging the close icon of the DIV along with the DIV

Check out the JSFiddle I'm having trouble getting the close icon within a draggable DIV to move along with the rest of the DIV. It seems like there might be an issue in this part of the code. $self = $(this); $(opts.parent).append($self); $('sp ...

javascriptjquerycss

JQuery is having issues with $(this) and the find function not working properly

I am attempting to access a child of the div with the class form-group, specifically, I want to display the value of the input element. <div class="form-group"> <label>text</label> <input name="text" type="text" class="form-co ...

javascriptjquery