Content obscuring dropdown menu

I am currently working on a screen design that resembles the following:

return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <View style={styles.searchFieldContainer}>
            <FavoritePointInput
              textChangeHandler={textChangeHandler}
            />
          </View>
          <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.favAddressesFoundList}
          />
          </View>
          <View style={styles.fieldDescription}>
            <Text>Set Location's Name:</Text>
          </View>
          <View style={styles.searchFieldContainer}>
            <Item style={styles.searchField}>
              <Input
                placeholder="Library"
                onChangeText={(text) => setLocationName(text)}
                style={styles.searchText}
              />
            </Item>
          </View> 
          <View style={styles.buttonContainer}>
            <Button style={styles.button}>
              <Text>Save Location</Text>
            </Button>
          </View>
          </View>
        </View>
    </SafeAreaView>
  );

The styling for this layout is as follows:

export const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
  },
  topContainer: {
    height: moderateScale(750),
  },
  topTextContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: moderateScale(15),
    height: moderateScale(30),
    paddingLeft: moderateScale(30),
    paddingRight: moderateScale(30),
  },
  topMiddleContainer: {
    alignItems: 'center',
  },
  topMiddleText: {
    justifyContent: 'center',
    paddingBottom: 40,
  },
  searchFieldContainer: {
    alignItems: 'center',
    height: moderateScale(120),
  },
  button: {
    width: moderateScale(120),
    borderRadius: moderateScale(20),
    alignItems: 'center',
    alignContent: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  searchField: {
    width: moderateScale(300, 0.3),
    height: verticalScale(40),
    marginVertical: moderateScale(3),
    borderRadius: verticalScale(10),
  },
  fieldDescription: {
    alignItems: 'center',
  },
    dropdown:{
    position: 'absolute',
    top: 200,
  }
});

Currently, I am facing an issue where the search results from the LocationsFound component are hiding behind the second input field once they appear. I would like these results to overlap and be displayed on top of the second field until a selection is made. Is there a way to achieve this?

https://i.sstatic.net/74v89.png

javascriptcssreactjstypescriptreact-native

Answer №1

This solution worked for me: I simply assigned a negative zIndex to the View that was displaying above my dropdown list.

<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... /> 
</View>

Answer №2

Did you experiment with the zIndex property?

dropdown:{
  position: 'absolute',
  top: 200,
  zIndex: 10,
  backgroundColor: '#fff'
}

Answer №3

To resolve the problem, I was able to fix it by incorporating the dropDownDirection="TOP" property into the dropdown component, which then renders the dropdown container in an upside-down orientation.

<DropDownPicker
  dropDownDirection="TOP"
  ...
 />

Answer №4

If you're looking to make some changes, one option is to adjust the order of your DOM elements and ensure that your result is placed as the last item:

return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <View style={styles.searchFieldContainer}>
            <FavoritePointInput
              textChangeHandler={textChangeHandler}
            />
          </View>
          <View style={styles.fieldDescription}>
            <Text>Set Location's Name:</Text>
          </View>
          <View style={styles.searchFieldContainer}>
            <Item style={styles.searchField}>
              <Input
                placeholder="Library"
                onChangeText={(text) => setLocationName(text)}
                style={styles.searchText}
              />
            </Item>
          </View> 
          <View style={styles.buttonContainer}>
            <Button style={styles.button}>
              <Text>Save Location</Text>
            </Button>
          </View>
          <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.favAddressesFoundList}
          />
          </View>
          </View>
        </View>
    </SafeAreaView>
  );

Another approach could involve assigning a z-index value to your dropDown component:

    fieldDescription: {
        alignItems: 'center',
      },
        dropdown:{
        position: 'absolute',
        top: 200,
        zIndex: 1 // ... or more  
}

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

Detecting mistakes using ES6 assurances and BookshelfJS

I'm working on implementing a simple login method for a Bookshelf User model in an ExpressJS application. However, I am facing issues with handling errors from the rejected promises returned by the login function in the User model. While referring to ...

javascriptnode.jsexpresses6-promisebookshelf.js

Arranging a Vertical Element Within a Rotated Holder

Who would have thought that geometry would come into play when working with CSS? I need help figuring out how to perfectly cover a rotated container with an upright background image. The goal is to hide the rotation on the sides and maintain dynamic contro ...

cssmathsassgeometry

Step by step guide to open and close a compact window in a React authentication flow using passport

I have successfully implemented the Google authentication strategy using Passport in my React application's login page. However, I would like to open a small window or iframe when the user clicks on "Authenticate with Google" instead of redirecting th ...

reactjsgoogle-oauth

Using React to trigger a child component's function upon clicking a tab

I need assistance with creating a React app that includes two tabs (Tab1, Tab2). When Tab2 is clicked, I want a message to appear in the console saying 'Function A is called'. Unfortunately, the code I have currently does not display the message ...

javascriptreactjsreact-hooksjsx

Is there a way to address the tar version in package-lock.json?

I am facing a similar issue to this problem on Stack Overflow: How can I resolve the high vulnerability in NPM package Tar related to Arbitrary File Overwrite, even though the package is updated? After installing node v17.2.0 and npm v8.2.0 using brew on ...

node.jsreactjsnpmtar

Error: An issue occurred in the driver.execute_script function causing a JavascriptException. The error message indicates

When attempting to run some JavaScript code on the Chrome driver, I encountered a JavascriptException. Despite my confidence in the correctness of the JS code, the following error message was displayed: raise exception_class(message, screen, stacktrace) s ...

javascriptpythonselenium-webdriverselenium-chromedriver

Tips for incorporating horizontal tile scrolling in MUI GridList

Welcome to my JavaScript page where I will be implementing the GridList component. This component will display multiple tiles that are scrollable horizontally once the list size exceeds the limits of the screen. import React,{ useState} from "react& ...

reactjsmaterial-uiscrollbarhorizontal-scrolling

The issue of background-attachment: fixed not functioning properly on Safari

Currently, I have the following code implemented on an element that extends 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no- ...

csssafaricross-browserbackground-attachmentbackground-size

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Encountering a mysterious error while trying to implement React's Context API in Next.js with TypeScript. The issue seems to be revolving around wrapping the context provider around the _app.tsx file. Even though I am passing values to the Context Pr ...

reactjstypescriptnext.js

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

javascripthtmlcss

Generating random indexes for the Answer button to render

How can we ensure that the correct button within the Question component is not always rendered first among the mapped incorrect buttons for each question? Is there a way to randomize the positions of both correct and incorrect answers when displaying them, ...

javascriptreactjs

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

I'm planning to use distinctive data attributes with a prefix like "data-mo-". Let's say I have the following elements: <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</ ...

javascriptjqueryhtmlcss

The "onCellEditCommit" property in the <DataGrid> component is not functioning as expected

Utilizing the DataGrid component from Material-UI to showcase a list of items. My goal is to enable editing for each cell in every row and update the corresponding item within that row. To achieve this, I am using the provided onCellEditCommit property o ...

reactjsmaterial-uidatagridedit

Sending a JSON Object to an API endpoint using the $.ajax method

While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...

javascriptjqueryajaxjson

Fancybox fails to acknowledge the thumbs feature

I received a sneak peek of five thumbnails for a gallery, but the actual gallery contains even more photos. To prevent cluttering my code, I decided to store them in an array. Here is the snippet of HTML code: <div id="start_slides"> <a href ...

javascriptjqueryfancybox

I am struggling to make my table adapt to different screen sizes and become

Here is an example of a table: <TABLE class=vysledky > <TR class=podtrzeni> <TD width="39" height="19">Order <br /> League</TD> <TD width="39" height="19">Order <br /> Team</TD> <TD width="3 ...

htmlcssresponsive-designhtml-table

Preserving objects/variables in non-volatile storage

SUMMARY Though I lack extensive programming experience, I am currently developing a hybrid mobile app with Cordova. The app will contain a substantial amount of static data which needs to be referenced periodically for basic operations. As the volume of o ...

jsoncordovatypescriptmobilestorage

What steps should be taken to prepare files (such as editing images) before they are uploaded to Google Drive using the `rpldy/drive-uploady` tool?

I have successfully implemented rpldy/drive-uploady to upload files to Google Drive. However, I would like to allow users to edit images before uploading them. How can I achieve this? Below is the code snippet: import DriveUploady from "drive-uploady ...

javascriptnode.jsreactjsnext.jsfile-upload

How to Condense an Element Using Position: Absolute

https://i.sstatic.net/GMUss.png I'm attempting to create functionality where the "Open Chat" button displays an Absolute positioned div, then hides it when clicked again. I experimented with using the react-collapse component, but encountered issues ...

javascripthtmlcssreactjs

I am experiencing difficulties connecting my webRTC app to the remote system

I've set up my webRTC app on an HTTPS server and it's working fine. However, I'm facing an issue where the Remote system details (SDP) are not being captured. Both the Local system (PC1) and Remote system (PC2) are unable to establish connec ...

javascriptnode.jswebrtc