React Native presents a persistent challenge with the absolute positioning of elements

Building a react native application with a divided left and right section.

The left side has flex:0.7, while the right side has flex:0.2.

In the left section, there's a container with an embedded ImageBackground resembling a circuit framework.

https://i.sstatic.net/AfygH.png

I need to position sub components within this framework as shown below:

Expected Output:

https://i.sstatic.net/dAcLn.png

Tried Methods:

Used HTML and CSS which worked smoothly:

Your CSS code here...
Your HTML code here...

However, trying to replicate this in react native brought some challenges. Here's what I attempted:

Your React Native JavaScript code here...

Problem:

Post implementation, captured screen screenshots of varying dimensions showed inconsistency:

https://i.sstatic.net/OGH2u.png

https://i.sstatic.net/XYDfh.png

Seeking assistance in making the absolute positioned elements responsive across all tablet screens without any distortion.

Note: Clarified that the issue is observed in a react-native environment.

androidcssiosreact-nativetablet

Answer №1

Give this a shot:

.container {
    background-image: url('https://i.sstatic.net/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
}
.coil {
    position: absolute;
    top: 204px;
    left: 180px;
    zoom: 101%;    }
.evaporator {
    position: absolute;
    top: 26px;
    left: 320px;
    zoom: 121%;
}
.compressor {
    position: absolute;
    top: 220px;
    left: 422px;
    zoom: 100%;
}
<div class="container">
  <div class="coil">
    <img src="https://i.sstatic.net/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.sstatic.net/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.sstatic.net/fzSaH.png" alt="compressor-image" />
  </div>
</div>;

Answer №2

Consider this as an alternative option. However, please note that the coordinates in this construction are hard-coded. If you adjust the size of the container with the background image, you will also need to update the positions of the nested elements accordingly.

<style>
  .container {
    background-image: url("https://i.sstatic.net/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    position: relative;
  }
  
  .container div {
    border: 2px solid orange;
    position: absolute;
  }
  
  .coil {
    top: 256px;
    left: 36px;
  }
  
  .evaporator {
    top: 40px;
    left: 296px;
  }
  
  .compressor {
    top: 272px;
    left: 333px;
  }
</style>
<div class="container">
  <div class="coil">
    <img src="https://i.sstatic.net/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.sstatic.net/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.sstatic.net/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer №3

Perhaps?

<style>
  .container {
    background-image: url("https://i.sstatic.net/AfygH.png");
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
    border: 2px solid crimson;
    margin: auto;
    display: flex;
    align-items: center;
    /* position: relative; */
  }
  
  .container div {
    border: 2px solid orange;
    /* position: absolute; */
  }
  
  .coil {
    margin-top: 111px;
    margin-left: 33px;
  }
  
  .evaporator {
    margin-top: -343px;
    margin-left: 140px;
  }
  
  .compressor {
    margin-top: 170px;
    margin-left: -49px;
  }
</style>
<div class="container">
  <div class="coil">
    <img src="https://i.sstatic.net/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.sstatic.net/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.sstatic.net/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer №4

In this solution, we are using flexbox instead of setting the position to absolute as requested.

.container {
    background-image: url('https://i.sstatic.net/AfygH.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    width: 700px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.coil, .evaporator, .compressor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evaporator {
    width: 80px;
    height: 80px;
    margin-top: 23px;
    margin-left: 140px
}

.coil {
    width: 150px;
    height: 150px;
    margin-top: 60px;
    margin-right: 231px;
}

.compressor {
    width: 80px;
    height: 80px;
    margin-bottom: 88px;
    margin-left: 218px;
    margin-top: -90px;
}
<div class="container">
  <div class="evaporator">
    <img src="https://i.sstatic.net/spv58.png" alt="evaporator-image" />
  </div>
  <div class="coil">
    <img src="https://i.sstatic.net/SKUms.png" alt="coil-image" />
  </div>
  <div class="compressor">
    <img src="https://i.sstatic.net/fzSaH.png" alt="compressor-image" />
  </div>
</div>

Answer №5

Since the image is a bitmap, it would be advisable to resize each element to their actual size and position them accordingly in pixels. If resizing the outer container is necessary, a similar approach can be taken by calculating the percentage of each element relative to the largest one and positioning them in the same manner...

.container {}

.circuit {
  position: relative;
  width: 100%;
  height: 100%;
}

.circuit>img {
  /* 688 x 401 */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 688px;
  height: 401px;
}

.coil {
  /* 120 x 90 */
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 90px;
  left: 150px;
  top: 199px;
}

.evaporator {
  /* 80 x 70 */
  position: absolute;
  z-index: 1;
  left: 375px;
  top: 25px;
  width: 80px;
  height: 70px;
}

.compressor {
  /* 90 x 120 */
  position: absolute;
  z-index: 1;
  left: 405px;
  top: 213px;
  width: 90px;
  height: 120px;
}
<div class="container">
  <div class="circuit">
    <img src="https://i.sstatic.net/AfygH.png" alt="circuit" />
    <div class="evaporator">
      <img src="https://i.sstatic.net/spv58.png" alt="evaporator-image" />
    </div>
    <div class="coil">
      <img src="https://i.sstatic.net/SKUms.png" alt="coil-image" />
    </div>
    <div class="compressor">
      <img src="https://i.sstatic.net/fzSaH.png" alt="compressor-image" />
    </div>
  </div>
</div>

Answer №6

This showcases a different approach.

.wrapper {
background-image: url('https://i.sstatic.net/trLFe.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
background-repeat: no-repeat;
 }
.tank {
position: absolute;
top: 204px;
left: 180px;
zoom: 100%;    
}
.condenser {
position: absolute;
top: 26px;
left: 320px;
zoom: 115%;
}
.pump {
position: absolute;
top: 220px;
left: 422px;
zoom: 100%;
}

<div class="wrapper">
 <div class="tank">
  <img src="https://i.sstatic.net/ahZYb.png" alt="tank-image" />
 </div>
 <div class="condenser">
  <img src="https://i.sstatic.net/frSpO.png" alt="condenser-image" />
 </div>
 <div class="pump">
  <img src="https://i.sstatic.net/qwRgf.png" alt="pump-image" />
 </div>
</div>;

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

The error message "No changes have been made" appears on iTunes Connect after adding a Video Preview

My attempt to include a video preview in iTunes Connect is proving challenging. Upon pressing the Save button, I receive a message stating: You haven't made any changes. Curiously, the Save button remains active, suggesting that modifications were ...

iosvideoapp-storeapp-store-connectpreview

Expand the number of columns from 12 to 16 on the largest screen size

In my current project, I am looking to have either 7 or 8 columns for the largest screen size using Bootstrap 4 (greater than 1200px). However, for screen sizes smaller than 1200px, the standard 12 columns suffice. Is there a way to modify the default Boo ...

htmlcsstwitter-bootstrapbootstrap-4

I have a two-column HTML layout. Is there a way to maximize the width of the `#left` div so that it can be resizable, while keeping the `#right` div a fixed size?

Check out this HTML snippet to demonstrate the issue: <div id="content"> <div id="left" style="float: left"> left content </div> <div id="right" style="float: left; width: 250px"> right content </div> </di ...

htmlcss

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss

Obtain the raw JSON URL from the web

Is there a website that can provide me with a constant URL for my JSON code so that I can edit it and see the changes reflected live on the same link? Currently, when I try to edit JSON code on gist.github.com, the URL of the raw format changes. Any sugg ...

javaandroidjsonamazon-web-servicesweb-services

What steps can I take to stop full-width images from stretching to fit the entire body size when placed within a flex container?

I'm having trouble with my layout - specifically, I have one container with four columns. It looks fine when I manually set the image sizes in each column, but I want to use percentage widths for more flexibility. However, when I do this, the images e ...

htmlcssflexbox

Only half of the image is responsive to hover effects

Just starting out with coding and running into an issue... My social media icons are supposed to turn pink on hover using a second image, but for some reason it's only showing up on the bottom half. Any suggestions? CSS: a.twitter:hover { backgr ...

htmlcss

Expanding images to fit the div's width in Bootstrap

I've encountered an issue with my grid of resized images - the original images are larger than what can be accommodated by the Bootstrap grid setup. The problem arises when I decrease the width of my window - instead of maintaining the resized size a ...

htmlcssimagetwitter-bootstrap

Establish a background image for a particular item within a list

Employing Ionic 2 with Typescript. I am seeking a way to empower users to choose the background color for each item in my list. ISSUE: How can I retrieve the reference to the i-th element? Whenever I select an item, it only changes the background of the ...

htmlcssangulartypescriptionic2

Using regex pattern in mobile with HTML5 input type number

Looking to create a regex pattern for an input field with type number that only allows numbers and dots. Here's what I've tried: <input type="number" pattern="[0-9.]*"> <input type="tel"> Both options are allowing only numbers (0-9 ...

ioscsshtmlnumpad

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

What is the best way to implement smooth scrolling to an anchor tag from a different page in NextJS?

In my NextJS project, I have two main pages - the Home page and the Leaderboard page. The navigation bar code looks like this: <div className={styles.navItem}> <Link href="/"> <a className={styles.navLinks} onClic ...

javascripthtmlcssnext.js

Conceal the scrollable content beneath a stationary transparent header, allowing the background to

Imagine having a background image, fixed header with transparent areas, a content div with semi-transparent background, and dynamic height in a traditional header/content/footer layout. The desired effect is to have the background and content scroll under ...

jquerycssimagecross-browserscroll

Set restrictions on the element with a fixed position

My div has a position: fixed that scrolls correctly, but I want it to stop when it reaches specific y-axis boundaries. How can I achieve this without flickering and maintaining performance? The behavior of Twitter's right panel is similar to what I&ap ...

javascriptcsspositioncss-position

Retrieving the tag value of a UIImageView within a UITapGesture handler

I am facing an issue with a UITapGesture attached to an image view in my project. I want to be able to use the same gesture for multiple images, but the handler method needs to differentiate between them. In order to achieve this, I attempted to retrieve ...

objective-cios

What should be done in Android when the app crashes due to incoming HTML content?

If I register using an email and password, the process is successful if the email exists within the domain. However, if a malformed email address like [email protected] is used, it returns HTML and crashes my app. How can I handle this issue? publi ...

androidhtmljson

Using PHP to process CSS stylesheet conditional statements with if...else logic

When trying to process a CSS stylesheet as PHP, I include the following code snippet at the top of my CSS file: <?php header("Content-type: text/css; charset: UTF-8"); ?> The CSS stylesheet (style.css) is then called using: <style type="tex ...

phphtmlcssapacheconditional-statements

`Acquiring information from a remote SQL database on an iPhone`

Although I am relatively new to iPhone programming and SQL, I have a basic understanding of both. My goal is to create an application that can generate a graph using data retrieved from the company server's database. I am familiar with plotting graph ...

iphonesqlios