The sudden sight of an image stretching off the page to the right

I have created a simple view with an image on the right and some text on the left. Here is how it appears:

return (
      <View style={styles.companyContainerStyle}>
        <View>
          <Text>{this.props.companyNameAr}</Text>
          <Text>{this.props.descriptionAr}</Text>
        </View>
        <View style={styles.imageContainerStyle}>
          <Image
            style={styles.imageStyle}
            source={{ uri: this.props.logo }}
            resizeMode='contain'
            resizeMethod='auto'
          />
        </View>
      </View>
    );

Here are the styles applied in order to align the text and image next to each other:

const styles = {
  companyContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    padding: 10
  },
  imageContainerStyle: {
    borderRadius: 5,
    borderWidth: 2,
    borderColor: '#2279b4',
    padding: 1,
  },
  imageStyle: {
    flex: 1,
    height: 100,
    width: 100,
  }
}

However, when viewed on the emulator, it looks like this: https://i.sstatic.net/Rs19Y.png

The issue seems to be that the length of the text is causing the image to be pushed off the screen to the very right. I expected the number of lines to adjust automatically to fit everything on the screen, but that is not happening. How can I ensure that everything appears neat even if the length of the text varies (as it is being fetched from a database)?

cssreactjsreact-native

Answer №1

#wrapper {
  display: flex;
  justify-content: space-around;
  width: 70%;
  height: 400px;  
  border: 2px solid grey;
  padding: 5px;
}
#header_content {
display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
#paragraph {
  width: 60%;
  text-align: justify;
  margin: 0px;
  
  
}
img {
  height: 20%;
  width: 20%;
}
<div id="wrapper">
  <div id="header_content">
    <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper purus risus, a gravida est ultricies in.</p>
<img src="http://lorempixel.com/400/200" alt="placeholder">  
  </div>
  
</div>

Ensuring proper alignment to avoid image overflow can be achieved with code similar to this.

Answer №2

To ensure proper spacing in your layout, make sure to assign flex: 1 to both the imageContainerStyle and the parent View containing the two Text components.

This adjustment is necessary because without a container with flex: 1, the Text components will attempt to fill all available space on their own. Adding this style rule to the container prevents this behavior.

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

Top section of a table repaired

It seems that the position fixed attribute is not working as expected in this scenario. I might be missing something. I'm trying to keep the input boxes in the first row frozen when scrolling, but none of the solutions I've found seem to be effe ...

jqueryhtmlcsshtml-tablesass

Activate Dropdown on hover and automatically close the menu when a link is clicked

Looking for assistance with a Dropdown menu that opens on mouse hover but needs to close when a link is clicked within the menu. Do you think JavaScript would be necessary for this function? .dropdow { position: relative; ...

htmlcss

Utilizing a component as a prop within another component when defining Routes

My project includes various components such as Dashboard, Users, Posts, and Category. I am looking to render these components within the Admin component based on different URLs. For instance, when the URL is /admin/dashboard, I want to render the Dashboard ...

reactjsreact-router-dom

Safari fails to set a div to 100% of its parent's height

Currently, I am developing a website where the layout of a section is structured as follows: <div class="col-md-6"> <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image& ...

htmlcsssafaribootstrap-4

React component's state fails to update object properties

I am facing an issue while trying to update the state using the handleChangeProps method. The problem is that, for some reason, the value of fields.fileName ends up being an empty string instead of the actual value. I am utilizing material-ui DropZone fo ...

reactjsmaterial-ui

Incorporate gulp-clean-css into the current gulpfile.js

I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...

cssnode.jswordpressnpmgulp-clean-css

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Can Webpack effectively reduce the size of jQuery files?

While this question may seem basic, I have yet to come across a direct answer to it. My dilemma is whether or not to continue utilizing jQuery in my React application, primarily for AJAX purposes. Will webpack intelligently include only the necessary AJA ...

jqueryreactjswebpack

Is there a way to refactor the onAuthStateChanged function from useEffect in firebase to a class component?

Below is the code snippet used in the function component: useEffect(() => { const unsubscribe = firebase.auth().onAuthStateChanged(user => { setIsLoggedIn(!!user); }); return () => { unsubscribe(); }; }); And here is ...

reactjstypescriptfirebasefirebase-authentication

Tips for efficiently exporting and handling data from a customizable table

I recently discovered an editable table feature on https://codepen.io/ashblue/pen/mCtuA While the editable table works perfectly for me, I have encountered a challenge when cloning the table and exporting its data. Below is the code snippet: // JavaScr ...

javascriptphpjquerycss

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Create a visually appealing collage using CSS without the need for traditional IMG tags

I'm currently working on a fun little project. My goal is to create a photo grid in HTML5 that displays 3x4 pictures (without using Divs) and adding all the images via CSS, meaning no img tag in the HTML file. The challenge is to make this grid respo ...

csshtmlgridcss-grid

What methods are available for generating a short-lived banner using JavaScript?

I recently entered this industry and am in the process of constructing a website. Utilizing HTML and CSS, I crafted a cookie notification banner. I am seeking guidance on how to ensure that it only appears once "every 24 hours for each user." I attempted ...

javascripthtmlcsscookiesbanner

Manifest and a few other static files, including fonts, were unable to be located following the execution of npm run build

My npm run build is missing the Manifest file and a couple of static fonts. The application was initially created using create-react-app. In the public/index.html, I have the following line: <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> ...

reactjsfontsmanifestcreate-react-app

Learning how to nest <div> elements within another <div> and then utilize positioning in HTML/CSS for beginners

Struggling to create a simple 4 block layout in the center of the page. Currently, I am using the following CSS on the parent div (class=wrapper) .wrapper { margin:0 auto; width:960px; } However, this centers all child divs but I am unable to position th ...

csspositioning

How to send a 2D array through this.setState() in a React component

Consider an example of a 2-dimensional array: let cart =[ ["Apple", "Banana", "Orange"], ["Lemon", "Watermelon", "Pineapple"], ]; This array is displayed in JSX as follows: <div> {cart.ma ...

reactjsarrays

Issues with Vite's global import feature not functioning properly in a production build

My current setup involves loading all markdown files within a directory using a glob import. The code snippet below depicts this functionality: const useGetChangelogs = () => { const [changelogs, setChangelogs] = useState<string[]>([]); useEf ...

reactjstypescriptmarkdownviterollup

Display a triangle underneath the chosen menu option

How can I display a small triangle below the selected menu item, similar to my tag box? I have tried various methods without success. You can view my attempts at this link. Any suggestions on how to achieve this? Thank you! nav { float: right; m ...

htmlcss

Error TS2349: The function cannot be called as it does not have a defined call signature. The type 'typeof renderIf' does not have any compatible call signatures

Based on the starter template found at https://github.com/react-native-training/reactxp-starter, I am just starting out with TypeScript! The issue seems to be related to the type in the renderIf function. I'm unsure where exactly the type should be s ...

javascripttypescriptreact-nativereactxp

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

csshover