Issue with Flex property not being supported in Safari browser

 .rq-search-container {
    position: relative;
    width: 100%;
    background: white;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 2px;
    z-index: 30;
    -webkit-flex: 1 0 15em;
  }

While this code functions correctly in Chrome and Mozilla browsers, it encounters issues when used with Safari browser.

I have attempted various solutions such as -web-kit-flex, but unfortunately, these did not resolve the issue. Any suggestions or advice would be greatly appreciated!

javascripthtmlcsssafariflexbox

Answer №1

Give this style a try: display:-webkit-flex

To ensure compatibility with all browsers, use the following CSS:

display: -webkit-box;   /* For old versions of iOS and Safari */
display: -ms-flexbox;  /* IE 10 */
display: -webkit-flex; /* For newer versions of Safari and iOS */
display: flex;         /* Firefox, Chrome, Opera */

Your code:

.rq-search-container {

 position: relative;
 width: 100%;
 background: #fff; 
 display: -webkit-box;   
 display: -ms-flexbox;  
 display: -webkit-flex; 
 display: flex;       
 flex-direction: row; 
 align-items: flex-start;
 border-radius: 2px; 
 z-index: 30;

}

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

Incorporating an offset with the I18nPluralPipe

Having trouble with my multiselect dropdown and the text pluralization. I attempted to use the I18nPluralPipe, but can't seem to set an offset of 1. ListItem = [Lion, Tiger, Cat, Fox] Select 1 Item(Tiger) = "Tiger", Select 3 Item(Tiger, Cat, Fox) = ...

javascriptangulartypescriptangular-pipe

Implementing the decrement functionality within an onclick event handler for a variable

Can someone assist me with this issue? I am trying to use a variable ID in HTML to call a function on a JavaScript page. For example: (Minus button not functioning) <button class="minus-button quantity-button button" type="button" name="subtract" onc ...

javascriptjqueryhtmlfunction

Apply a class to each consecutive element following the current one until reaching a child element with a

My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next o ...

javascriptjqueryhtmlcss

What is the best way to retrieve the value of the first name using Protractor?

Is there a way to store the value of the first name using a protractor script? The first name is set when the user logs in and corresponds to the name of the logged-in user. I am wondering if this can be done utilizing by.addLocator(). Here is the tag tha ...

javascriptseleniumprotractor

Tips for displaying HTML content using an array in Vue JS

Hi, I'm a beginner with Vue JS and I'm working on passing an HTML table using this array. I have a dropdown where I can select the option I want, but I'm struggling to figure out how to include HTML within it. Whenever I try, it ends up disp ...

javascripthtmlarraysvue.jsdropdown

The issue with JQuery's JSON.stringify function not functioning as expected

Hi everyone, I'm currently working on a project involving a nested menu and I need to update it via API whenever the client moves an item. To achieve this, I am using a jQuery plugin called . The plugin includes an onDrop method as shown in the code s ...

javascriptjqueryjson

angular js sorting JSON objects by ID

I am having trouble sorting and displaying data with AngularJS. I have added a sort option to my table, but it does not seem to be working properly. Could you please review my JSON data? [ { "id":143, "companyName":"XC", "dividendIn ...

javascriptangularjs

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

What is the best way to transfer information between two components in React.js by simply clicking a button?

One of the challenges I am currently facing involves rendering data from the Pokemon API in a table. Within this table, there is a button that allows users to select specific data when pressed. My goal is to send this selected data from the table component ...

javascriptreactjsmaterial-uireact-props

Accessing the system through a pop-up window with the help of AJAX and

As a newcomer to the world of AJAX, I must admit that I may have jumped into this field with too much enthusiasm. For several days now, I have been struggling to integrate AJAX with my PHP script. Before dismissing this question as a duplicate, please unde ...

javascriptphpajaxauthenticationbootstrap-modal

Could the slow loading time of the React site be attributed to an overload of static assets?

As a ML professional diving into frontend development, I have recently incorporated various fixed assets such as images into the assets folder for React. However, I've noticed that my website is running slower than expected. Do you believe that these ...

javascriptreactjsfrontendserver-sideclient-side

TabPanel with Grid component causes Error: The server-rendered UI does not match the initial UI, resulting in failed hydration

After completing all the necessary steps and transferring all the files from nextjs-with-typescript, everything seemed to be in order until I tried adding Grid inside the TabPanel in the code snippet below: import * as React from 'react'; Tabs fr ...

javascriptreactjsnext.jsmaterial-ui

Adding 7 days to a JavaScript date

Can you spot the bug in this script? I noticed that when I set my clock to 29/04/2011, it displays 36/4/2011 in the week input field! The correct date should actually be 6/5/2011 var d = new Date(); var curr_date = d.getDate(); var tomo_date = d.getDate( ...

javascriptjquerydate

What method can I use to replace the status bar from the top?

Is there a way to smoothly slide in and out a <View/> on React Native iOS, similar to the animation sequences shown in the images below? ...

javascripthtmlcssreactjsreact-native

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

javascripthtmlcssangulartypescript

Can the functions passed into Material-UI withStyles() be relocated within the component?

Attempting to break down the components of my dashboard into smaller parts has proven challenging due to their dependence on drawerWidth. Initially, I considered moving drawerWidth into the state so it can be passed down to each component. However, I encou ...

cssreactjsmaterial-uinext.js

Exploring MongoDB querying with two keys in conjunction with Express JS and NodeJS

I'm seeking assistance with my web application developed using Express JS and Node. I am encountering issues with the .find() command when trying to search for multiple words. It's interesting because using the $all command works when two words ...

javascriptnode.jsmongodbexpressget

Unable to fetch options for drop-down list from Database

As someone who is new to frontend application development, I am facing a challenge in populating a Select list from the database. Despite following similar approaches like the one discussed in How to populate select dropdown elements with data from API - R ...

javascriptreactjsangularspring-bootselect

Changing a base64 string to an image within an angular 4 environment

My current task involves cropping an image using ng2-image cropper, but the result is in base64 format. I need to convert it to an image source so that I can send it to a server. Despite searching, I haven't been able to find anything compatible with ...

javascriptangular

What specific width range would be best for my needs?

I used to have the default font style of Myriad Pro Light and a padding setting for my main menu on my website as follows: .menu > li > a { padding: 17px 15px 15px 15px; } Recently, I changed the default font style to Montserrat. However, this chang ...

htmlcss