minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image?

export default () => (
  <Popup
    trigger={<Button className="button" variant="contained" color="primary" > Click me! </Button>}
    modal
    nested
  >
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
          &times;
        </button>
        <div className="header"> Heading</div>
        <div className="content">
          {' '}
          <div className="car">
            <img src={car} alt="car" />
          </div>
          <br />
          <br />
       Text
        </div>
      </div>
    )}
  </Popup>
);

Style:

  .car {
    width: 10;
  }

When attempting to create a sandbox for testing, I received a material UI error: https://codesandbox.io/s/bold-hooks-yhik1?file=/src/Popup.tsx

The modal will open upon clicking the button.

Answer №1

To properly style the image tag in CSS, ensure that you specify a valid unit such as pixels (px) or percentage (%).

Section

<div className="modal">
    <button className="close" onClick={close}>
      &times;
    </button>
    <div className="header"> Guide </div>
    <div className="content">
      {" "}
      <img src={car} alt="charts" className="charts" />
      <br />
      This example showcases the
    </div>
  </div>

CSS

.charts {
  width: 20%;
}

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 proper way to handle redirection in Apollo and React after encountering authentication failure

I'm currently developing a React application that relies on apollo-client and incorporates apollo-link-error to effectively manage authentication errors across the app. Additionally, I am utilizing createBrowserHistory for seamless browser history man ...

Dropdown list remains open despite a selection being made

My problem arises when I attempt to select an item from the list, as the dropdown menu does not populate automatically and the list remains open. Here is the HTML code for the dropdown list: <label id='choose' for='options'>Sele ...

The configuration for CKEditor5's placeholder feature seems to be malfunctioning

I am currently experimenting with a customized version of CKEditor 5 known as BalloonBlockEditor. Below is the custom build output that I have created: /** * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved. * For licens ...

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

Dealing with a 409 conflict situation involving a document in Node.js using Nano library

After conducting research, it has come to my attention that there are numerous document conflicts with couchdb. While exploring a potential solution in Updating a CouchDB document in nano, I discovered the following steps: Retrieve the document Store th ...

Load information into a different entity

I need help with adding new values to an existing object. When I receive some form data from noteValue, I also have additional input data in my component under person that I would like to integrate into noteValue before saving it. let noteValue = form.va ...

Distinguish between datalist selection and text input in BootstrapVue Autocomplete

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> &l ...

Creating a Copy of an Object in JavaScript that Automatically Updates When the Original is Changed

I am in the process of developing a planner/calendar website with a repeat feature. var chain = _.chain(state.items).filter({'id': 1}).head().value(); console.log(chain); After filtering one object, I am wondering how to create a duplicate of c ...

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

What is the best way to single out a specific item from a list to display in a component upon clicking in Vue.js?

To view the data of a specific item in the child component "comandasInd", I just need to click on the icon. <template> <v-data-table :items="comandas"> <template v-slot:items="props"> <td>{{ props.item.nombre }}</td& ...

I'm looking to learn how to implement the delete method in an API using TypeScript. Can anyone help me out

I am seeking guidance on utilizing 'axios' within 'nuxt.js'. I have experimented with sample data, and I am particularly interested in learning how to utilize the 'axios' method within 'nuxt.js' using TypeScript. T ...

Choose a disabled text input component from ant design library for React

Is there a way to disable text input in the aria section of this code so that users can only select from the menu? let sel = <Select showSearch readOnly style={{width: '40%', paddingRight: 40}} ...

Issue encountered: "An error has occurred stating that your cache folder contains files owned by root. This is likely a result of a bug present in older versions of npm. This issue arose during the execution of the

While attempting to create a new react app using the command npx create-react-app example_app, I encountered the following issue: [ Your cache folder contains root-owned files, due to a bug in previous versions of npm which has since been addressed sudo ...

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

I can't seem to get the npm run dev command to work properly after setting up

After successfully setting up React JS with Vite and running npm i, I encountered an error when trying to run npm run dev: > [email protected] dev > vite E:\nasheednaldo\node_modules\rollup\dist\native.js:64 ...

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

Pop-up window for uploading files

Looking for assistance with my file uploading system. I am utilizing a unique purple button from http://tympanus.net/Development/CreativeButtons/ (Scroll down to find the purple buttons). Additionally, I am using a wide, short content popup feature availa ...

Encountering a TSLint interface error when adding a value to a nested array

Currently, I am transforming responses into an array of Months and Days, with each Day containing an array of numbers. The logic itself is functioning properly, however, I am encountering a tslint error specifically when attempting to push a value into the ...

Transmitting an Array Using an Ajax Call

Is there anyone knowledgeable in Ajax here? I'm struggling with sending a javascript array in an ajax request. Can someone provide me with an example of how the ajax request should be formatted? My goal is to gather all the javascript data, package it ...

An error occurs in TypeScript when attempting to reduce a loop on an array

My array consists of objects structured like this type AnyType = { name: 'A' | 'B' | 'C'; isAny:boolean; }; const myArray :AnyType[] =[ {name:'A',isAny:true}, {name:'B',isAny:false}, ] I am trying ...