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

What is the best method for exporting and importing types in React and Next.js apps?

Is there a way to export and import types from API responses in TypeScript? I have a type called Post that I want to re-use in my project. // pages/users.tsx type Post = { id: number; name: string; username: string; email: string; address: { ...

What could be causing my post request to function properly in POSTMAN but not in my React application?

Here are my POSTMAN headers along with the settings I used to send my POST. It only started working when I switched the Content-Type to application/json. https://i.stack.imgur.com/Xz2As.png https://i.stack.imgur.com/aJtbD.png This pertains to the server ...

JavaScript and Angular are used to define class level variables

Hello, I'm currently diving into Angular and have encountered an issue with a class level variable called moratoriumID in my component. I have a method that makes a POST request and assigns the returned number to moratoriumID. Everything seems to work ...

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

Number input in JavaScript being disrupted by stray commas

On my webpage, there are elements that users can control. One of these is a text input field for numbers. When users enter digits like 9000, everything functions correctly. However, if they use comma notation such as 9,000, JavaScript doesn't recogniz ...

React Hook Form not refreshing form inputs

Despite successfully submitting the form, saving the data to state, and persisting it in local storage, I am facing an issue where updating a form field's value does not reflect the changes. It seems that when trying to modify a form field that is po ...

Create a list using ng-repeat in AngularJS, each item separated by "custom categories"

I am looking to create a dynamic list that will display values entered by users, categorized by custom categories. The challenge is that I do not know in advance which category each element will belong to. Here's an example of how I envision the list ...

Implementing the ternary operator on a nested object field in typescript to enforce type validation

Is there an issue with my code or is this intentional? I want to write something similar to this. type MyDefinition = { salutation: string; value?: { typeOfValue: string; val?: string }; }; function create(name: string, input?: Partial<MyDefin ...

Active Storage seems to be on the hunt for an attached file rather than actually attaching them

After sending a post request with a photo to a controller for a model connected to activestorage, I keep getting an error message stating #<ActiveRecord::RecordNotSaved: Failed to save the new associated photo_attachment.> If needed for clarificatio ...

Testing asynchronous functions with Mocha

Currently, I am in the process of developing a node wrapper to interface with an external api. One particular challenge I am facing is testing the asynchronous functionality of the createJob method. Provided below is the test case code: api_key = "test_0d ...

Restrict the height of posts created in the summernote editor

My goal is to create a structured page application using summernote. When using summernote, a div with contenteditable=true is appended to the body to allow users to add content. However, I want to set a fixed height for this div so that users can only ent ...

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Currently, I am fetching data from an API and updating TextFields with it for display. My goal is to allow users to edit the data shown in these TextFields, but I keep encountering a Uncaught TypeError: prev.fields is not iterable error whenever I attempt ...

Executing a script in the browser console automatically upon clicking a link can be achieved using Python

I am interested in executing JavaScript in my browser's DevTools console. Currently, I have managed to open a specific website through it. Is there a way to achieve this using Python? Here is the code I am currently using: url = 'http://some-we ...

Button for navigating to the previous slide on a Jquery slider

There appears to be an issue with the code on the previous button. When the user presses "previous" on the first slide, there is a momentary blank slider before the last slide appears. Is there a way to make this transition smoother? Thank you for your a ...

How can I utilize angular's $http service to fetch a JavaScript file?

I've been exploring the integration of Angular with Node.js and attempting to establish a connection to a MySQL database. Within my script (server.js), I am utilizing the node mysql module as shown below: var mysql=require('mysql'); var ...

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

Wait for Protractor until the page has completely finished loading

After navigating to https://docs.angularjs.org/tutorial, I attempted to click on '0 - Bootstrapping' under Tutorial but Protractor did not wait for the page to fully load, resulting in an Error. Error: Failed to execute 'click' on &a ...

Encountering AngularJS promise data parsing issues

I am trying to work with promises in AngularJS. However, I encountered an error while parsing the backend response in AngularJS. What could be the issue here? This is the HTML code: <div ng-app="clinang" ng-controller="pacientesCtrl"> <a ...

The Angular translation service may encounter issues when used on different routes within the application

I'm currently working on an Angular application that has multi-language support. To better organize my project, I decided to separate the admin routes from the app.module.ts file and place them in a separate file. However, after doing this, I encounte ...