Make sure to always keep all stars contained within a div element

How can I keep five stars inside a div even when the screen size is small?

I have created a div with an image and I want to place five stars within that div. However, as I reduce the size of the screen, the stars come out of the box.

Is there a way to ensure that the stars always stay within the box regardless of the screen size?

html

<div class="abc">
    <div class="def">
        <img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg">
        <div class="row boxImage">
            <star-rating value="4" totalstars="5"
                 (rate)="Rate($event)"></star-rating>
        </div>
    </div>
</div>
angulartypescript

Answer №1

Inside the CSS for the boxImage class, the width is currently set to 40%. To learn more about the CSS width property, you can visit this link: https://example.com/css-width-property

It's important to note that according to the documentation:

<\percentage> Sets the width as a percentage of the containing block's width.

This means that your star rating component will always be constrained by 40% of the resized image's width, resulting in limited space for the 5-star display. To address this issue, consider using the value: max-content. You can find more information on this here: https://example.com/max-content-css

.boxImage {
    background-color: white;
    background-repeat: no-repeat;
    height: 50px;
    width: max-content;
    border-radius: 8px;
    opacity: 1;
    max-width: 360px;     
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;}

Make sure to consider browser compatibility when implementing these changes (refer to the provided link).

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

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

javascriptangulartypescriptrxjs

Combining Angular 1.3.4 and Angular 2 - A comprehensive guide

Currently, I have an application built on Angular 1.3.4 and my goal is to gradually transition it to Angular 2, module by module. For instance, if there are 5 modules on my webpage, I want to move one module to Angular 2 while keeping the other modules ru ...

angularjsangularng-upgrade

Learn how to effectively declare data as global within Angular2 or Typescript

I am facing an issue with fetching the id inside the Apiservice despite being able to get it in the console. Can anyone provide assistance on how to solve this problem? TS: deleteProduct(index,product) { var token = this.auth.getAccessTokenId(); ...

javascriptangulartypescript

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

javascripthtmlangular

Unable to locate element in the DOM using XPath

Having trouble retrieving an element from the DOM using XPath <input bsdatepicker="" class="form-control font-size-normal ng-untouched ng-pristine ng-valid" id="endDate" name="endDate" placement="top" type="text"> The value of the element is not p ...

angularseleniumxpath

Angular Custom Input Form: Tailored to Your Specific Needs

Need help modifying an input field? Here's how: <input type="text" formControlName="name" placeholder="placeholder" (keypress)="function" (focus)="function" You can create a component to achieve the same functionality by using this template code: ...

angular

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

htmlcssangularangular-material2

Generate multiple instances of an HTML element by using ngFor and referencing an object property

In my Angular project, I am generating a unique object called starStructure based on the vote_average of each item. Here is an example of what my object array looks like: [ {"title":"Solo: A Star Wars Story", "vote_average":7.1, "starStructure":{" ...

angular

Utilizing Angular: Integrating the Http response output into a map

I have a situation where I am making multiple HTTP calls simultaneously from my Angular application. The goal is to store the responses of these calls in a Map. data: Map<number, any> = new map<number,any>(); --------------------------------- ...

javascriptangularmultithreadinghttpsynchronization

Utilizing TypeScript to reference keys from one interface within another interface

I have two different interfaces with optional keys, Obj1 and Obj2, each having unique values: interface Obj1 { a?: string b?: string c?: number } interface Obj2 { a: boolean b: string c: number } In my scenario, Obj1 is used as an argument ...

typescript

An error occurred while attempting to set up Next-auth in the process of developing

In my Next.js app, I have implemented next-auth for authentication. During local development, everything works fine with 'npm install' and 'npm run dev', but when I try to build the project, I encounter this error message: ./node_modul ...

typescriptnext.jsnext-auth

BrowserSync initiates without any access URLs specified

Recently, I set up a scaffolding project using Yeoman (ng-fullstack) and opted for the client side options only. The installation went smoothly, but when I try to run "gulp", all tasks are executed without any errors and it launches http://localhost:3000. ...

angularnpmgulpyeomanbrowser-sync

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

javascripthtmlangulartypescript

Tips for inserting an HTML element within an exported constant

I need help formatting an email hyperlink within a big block of text. Here is the code snippet: const myEmail = '<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4b564f435e424b6e4b564f435e424b004d41 ...

htmlreactjstypescript

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

javascriptangulartypescriptnpmionic-framework

Place the Div in a consistent position on images of varying widths

I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class. Everything works smoothly when the image takes up the entire width of the class, but as soon as the image widt ...

htmlcssangulartypescript

An error was encountered while parsing JSON data in Angular due to an unexpected token

I am currently working on implementing role-based authorization in my project. The goal is to hide certain items in the navigation bar based on the user's role. I encountered an error as shown below. How can I resolve this? service.ts roleMatch(a ...

jsonangularangular5angular6

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

The styled component is not reflecting the specified theme

I have a suspicion that the CSS transition from my Theme is not being applied to a styled component wrapped in another function, but I can't pinpoint the exact reason. I obtained the Basic MUI Dashboard theme from this source and here. Initially, inte ...

cssreactjstypescriptmaterial-ui

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui