Unable to create adjacent buttons using display:inline-block

I'm using Angular to dynamically create buttons, but they are stacking vertically instead of appearing side by side

<div *ngIf="response">
   <div *ngFor="let hit of response.hits.hits">
      <button class="btn btn-primary" role="button" style="display:inline-block">{{hit._source.keywords[0].keyword}}</button>
   </div>
</div>

I've attempted to use style="display:inline-block" and style="display:inline", which both result in the buttons being stacked. Is this behavior related to how *ngFor functions or is there another CSS property I should consider?

htmlcssangularstylesngfor

Answer №1

The reason for the vertical stacking is due to the use of multiple div elements, which are block-level elements.

To fix this, you can implement the ngFor loop on the button element:

<div *ngIf="response">
  <button *ngFor="let hit of response.hits.hits" ... style="display: inline-block">...</button>
</div>

Alternatively, you can set the display style directly on the inner div:

<div *ngIf="response">
   <div *ngFor="let hit of response.hits.hits" style="display: inline-block">
      <button...>...</button>
   </div>
</div>

Answer №2

It appears that you are utilizing bootstrap, therefore, the solution is to enclose these buttons within a btn-group element: 

<div *ngIf="response" class="btn-group">
   <button *ngFor="let hit of response.hits.hits" class="btn btn-primary" role="button" >{{hit._source.keywords[0].keyword}}</button>
</div>

Answer №3

 <div style="clear:both" class="button btn-primary" role="link" style="display:inline-block">{{hit._source.keywords[0].keyword}}</button>

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

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

javascriptjquerycsshtml

Discovering the power of angular async binding in your projects can greatly

Is there a way to achieve something similar to <span *ngIf="admins.includes(name) | async"> where the admins is declared as Observable<string[]> in the component class? I understand that this code may not work, but is there a workaround to make ...

angularrxjs5

My HTML table is not printing at full width

Seeking assistance with creating a printable calendar using an HTML table. The calendar prints perfectly on a Mac, but when attempted on Windows in all browsers, it adds a 3" margin at the top regardless of CSS print settings. The client requires the cal ...

htmlcssprintinghtml-table

Move the angular component to an external location

Is there a way to extract a component from my Angular application 'A' and store it separately in order to easily reload it into another Angular application 'B' with the same node_modules and run it? Essentially, I'm looking to crea ...

angularcomponentsruntimestore

It appears that the input variables in Angular (5) are experiencing some issues

After upgrading my Angular project from version 4 to 5, I've noticed some unexpected changes in the behavior of my components. In my application, there is a ParentComponent and a ChildComponent. The ChildComponent receives an InputObject from its par ...

angular

challenges arising from using the css overflow: hidden attribute

Struggling with a popup displaying issue caused by an overflow: hidden property on the containing div. The background graphics of the popup are crossing over due to this setting, leading to a display problem where the width is cut off at the overflow bound ...

jqueryhtmlcssdhtml

Leveraging SignalR in conjunction with jQuery to dynamically alter the CSS style of a span

Utilizing SignalR to dynamically update a span's color based on real-time data source. The connection is established successfully, but encountering difficulties with updating the css classes on the span. The issue arises when attempting to update mul ...

jqueryhtmlcssrazorsignalr

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"

My navigation setup is as follows: <ul> <li><a href="index.html#open-site">Test</a></li> <li><a href="#open-site">Test</a></li> <li><a href="test.html#open-site"> ...

jqueryhtmlfunctionnavigationclick

What is the reason my bootstrap carousel isn't functioning properly?

My carousel is only displaying the first image and seems to be stuck. The navigation buttons are also not functioning. Here is the code for reference: <main> <div id="slider" class="carousel slide" data-mdb-ride="carousel"> <div cl ...

htmlcssbootstrap-5

What is the best way to generate a distinct identifier for every div element on a

Currently, I am working with Angular 2 and have a div element that I need to repeat in my HTML markup. This particular div contains a click event attached to it. Here is the code snippet: HTML: <div class="row"> <button class="btn btn-primar ...

angulartypescript

How can one efficiently update post statuses in Ionic 4 without having to constantly reload or refresh the webpage?

I have created a dynamic list of posts, each with a "like" and a "comment" button. The issue I'm facing is that whenever I click on the like button, I have to manually refresh the page for the changes to appear. One approach I considered was incorpor ...

angularionic4

Hover functionality for the border animation is disabled, but the SlideToggle feature is operating smoothly

I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...

jqueryhtmlcolorsjquery-animateborder

Creating a package containing an Angular 2 application combined with Express

I recently completed a regular Angular CLI project using webpack for production. After bundling the project, I transferred the contents of the dist folder to another project where Express was installed. var express = require('express'); var app ...

node.jsweb-servicesexpressangularangular-cli

How to set the element in the render method in Backbone?

Currently, I am in the process of developing a web page utilizing BackboneJS. The structure of the HTML page consists of two divs acting as columns where each item is supposed to be displayed in either the first or second column. However, I am facing an is ...

javascripthtmlbackbone.js

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Selecting the perfect default font using font-display: fallback

When I use a particular font and find that its loading time is too high, I want to set a default font. So I experimented with the following code: font-display: fallback; It seems to be working fine (although I haven't checked compatibilities yet), ...

css

Collapsing table row in Bootstrap upon button click within the same row

The snippet showcases a basic table with one row containing a button group. Upon clicking the 'main' button (the reset button), the following table row will appear. This behavior is intended only when clicking on the table row itself, not the but ...

htmlcsstwitter-bootstrapbootstrap-4

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

Troublesome bug in Angular 7: [ngModel] functionality fails to cooperate with mat-select

Having trouble implementing ngModel in the following scenario: Check out the template code below: <mat-select [ngModel]="data.dataObject[0].phase"> <mat-option *ngFor="let phase of possiblePhases" [value]=" ...

angularangular-material

When using NextJs, running the commands 'npm build' and 'npm start' can sometimes cause style inconsistencies

Currently working on a project with NextJs (sorry, no screenshots allowed). Running 'npm run dev' for development works perfectly fine, but when I switch to 'npm run build' and then 'npm start', the website displays overlappin ...

cssreactjsnpmwebpacknext.js