flex display doesn't automatically wrap long strings as intended

Attempting to showcase a lineup of items in a row using flex display. Development is being done with angular 7. Check out the HTML code I utilized:

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div class="d-flex">
    <div *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
      <span *ngIf="!allergy">None</span>
    </div>
  </div>
</div>

The d-flex class leverages Bootstrap for its display properties:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

In the component, allergies is predefined as:

allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];

Visualization:

https://i.sstatic.net/86IGY.png

The current output illustrates improper breaking and distorted layout when the list surpasses the computed column width. How can the display be corrected to align correctly and break as expected? Suggestions on improving my inquiry or providing additional details are appreciated.

Answer №1

Are you looking for something like this?

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div>
    <ng-container *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
      <span *ngIf="!allergy">None</span>
    </ng-container>
  </div>
</div>

You can view a demo on stackblitz to see how it looks.

I hope this information is helpful!

Answer №2

If you are working with Angular, my recommendation is to utilize the Flex-layout library.

To organize your elements, consider using the row wrap properties.

In addition, you can implement the following code snippet:

<div class="d-flex">
  ...
  ...
    <div *ngFor="let product of products; let i = index" class="d-flex">
       ...
    </div>
  </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

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

What steps can I take to ensure my radio button functions according to my specified conditions?

Check out this code: <div className="form-group row mb-3"> <div className="col-sm-2" style={{ fontSize: "1rem" }}> Test:{" "} </div> <div className="col-sm-4"> <div ...

Learn how to easily center a responsive navbar using Twitter Bootstrap

I'm having a bit of trouble creating a website with Twitter Bootstrap, specifically when it comes to centering the navigation links in responsive design. My goal is to have a two-row navigation bar for tablet and phone devices, with the brand name at ...

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

Adding a space after an attribute in HTML5 is crucial for proper

I remember reading that in XHTML, it was recommended to have a space between attributes and the closing bracket of a tag. For example, <a href="example.com" > instead of <a href="example.com">. I'm curious if this also applies to HTML5, an ...

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

Trigger a post request by clicking the button to generate an excel report for download

I am attempting to download an excel file by making a POST call upon clicking a button in AngularJS. The Java controller I am working with returns void. This is the service code used to write to the excel file: response.setContentType("application/ms-exc ...

scrolling disabled in mobile browser

After testing my new site on my Android phone, I noticed that I am unable to scroll anywhere on the page. However, when viewed on Firefox, Opera, IE, and Chrome desktop browsers, I am able to scroll vertically when needed. In the CSS rule for my HTML body, ...

Order an array based on a specified list of fields

Imagine you have an array of objects: People = [ { "id": 1, "name": Joseph, function: "preacher"}, { "id": 2, "name": Ann, function: "singer"}, { "id": 3, "name": Miles, functi ...

Step-by-step guide on how to superimpose a Glyphicon on

I'm struggling to figure out how to overlay a Glyphicon (.glyphicon-zoom-in) on top of a Bootstrap .img-thumbnail. The specific CSS rule I've been using is content:"\e015"; ...

Ways to activate Form Validators in angular2?

I recently developed an Angular2 web application and successfully integrated a custom validator using the form builder. Although it works when the form is submitted, I am facing difficulties in triggering validation dynamically based on changes in other fo ...

Create a text container that adjusts its size based on the content within

My goal is to create a unique display using CSS: I want to add various texts and lines to fill in the white space on the left and right sides. I have made some progress with this http://jsfiddle.net/g5jtm/, but I am facing a few issues: The text width ...

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

How can I incorporate a .shtml file into a .php webpage?

Is there a way to include a .shtml file within a .php page? I know it can be done, as I have successfully achieved this in the past (although I cannot remember the exact code). Can someone please assist me with this? ...

Transitioning from MVC to Angular 2 and TypeScript: A Step-by-Step Guide

Seeking guidance as I venture into the world of Angular. My goal is to pass a string variable 'element' to my UI and utilize it. However, I am unsure about how to go about passing it inside main.js and beyond. How can I transfer a variable to a t ...

Is the CSS after-before property not functioning properly?

In my CSS code, I am utilizing the after and before tags. This is the structure of my div. However, I am facing an issue where my after tag is not functioning as expected. While everything else seems to be working fine, the after and before tags are not di ...

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

Tips for converting text input in a textbox to a Date value

My knowledge of Angular is limited, and we are currently using Angular 10. In our application, there is a textbox where users need to input a date in the format 10202020. This value should then be reformatted as 10/20/2020 and displayed back in the same ...

What are the sequential steps to create a CSS/HTML layout efficiently?

As a developer who is familiar with print design but new to web design, I have a designer assisting me in this transition. While I don't need tips on design or usability, I am eager to learn about the step-by-step process of coding a webpage. I want t ...

Enhance Your Search Functionality with an Angular Pipe

I created a custom pipe that filters the search field and displays a list of items based on the search text. Currently, it only filters by companyDisplay, but I want to also filter by companyCode and companyName. JSON [{ companyDisplay: "ABC", co ...