Tips for displaying a div element inline with precision?

I have HTML code to create multiple small boxes, each with a name retrieved from an object called graphdata.

    <div ng-repeat="a in graphdata" class="inline">

<div class="legend-box"style="background-color:{{a.color}};">
</div>
      <p class="legend-name">
     {{a.projects}}
      </p>
 </div>
   </div>

I want to align these boxes in rows, with each row containing only 2 boxes with names. Here is an example of how I want the layout to look:

  [] box1      [] box2
  [] box3      [] box4
  [] box5      [] box6

The issue is that I am using ng-repeat. How can I achieve this layout?

htmlcssangularjsionic-framework

Answer №1

.inline {
     display: inline-block; /*This is the inline style, with a twist*/
     width: 50%; /*Adjust as needed while considering margins*/
     box-sizing: border-box; /*Helps fix padding-related problems*/
}

Answer №2

To create a two-column layout, consider using ul li instead of div elements. Apply the following css property: ul column-count:2.

Alternatively, you can use float:left and width:50% for each div to achieve a two-column display.

Answer №3

Ensuring a fixed width and height for the inline and legend-box classes is crucial.

In order to create a responsive design, it's important to specify these classes for various media queries as well.

Answer №4

Since you indicated the question pertains to the ionic-framework, I will provide my answer based on features of the Ionic framework.

The Ionic documentation showcases various examples of utilizing a grid layout.

One potential solution could be implemented as follows:

<div class="row">
    <div ng-repeat="item in data" class="col col-50">
        <div class="box" style="background-color:{{item.color}};"></div>
        <p class="item-name">{{item.name}}</p>
   </div>
</div>

Answer №5

If you want to avoid using ul and li elements, you can utilize the power of Flexbox!

https://example.com/flexbox-guide

Just keep in mind that it may only work on newer browsers!

Here's a simple example:

.container {
 display: flex;
 align-items: flex-start;
}
.item {
 width: 50%;
}

I hope this solution proves to be helpful!

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

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

javascriptphpjqueryhtml

Subheaders that stay in place while scrolling through a table with a stationary header

My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they rea ...

javascripthtmlcsshtml-tablefixed-header-tables

Using the ng-if directive in Angular to display a different class

In attempting to display a table with true and false values for each data retrieved from an API, I encountered an issue. If the value is true, the corresponding <td> should contain: <td><span class="label label-success status-active" title= ...

angularjsview

Determine the DOM element that corresponds to a right-click action

I utilized the code snippet below to construct a personalized context menu: <script type="text/javascript"> $(document).ready(function() { var x, y; document.oncontextmenu = function(e) { e.preventDefault(); x = e.clientX; ...

javascriptjqueryhtmlcontextmenu

Deleting an List Item from an Unordered List using Angular

Within my MVC controller, I have an unordered list with a button on each item that allows the user to remove it from the list. The issue I'm facing is that while the row is deleted from the database, it still remains visible on the screen. This is ho ...

javascriptjqueryhtmlangularjs

Unable to find '.file.scss' in the directory '../pages'

I am currently in the process of migrating my Ionic 3 app to version 4. However, I have encountered an issue where some pages are not recognizing the SCSS file from the TypeScript component. @Component({ selector: 'car-id', templateUrl: &apo ...

cssangulartypescriptionic4

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage: header-div fixed_menu_div page_cont Each of these divs are styled with the following CSS properties: #header-div { top:0; left:0; display:inline; float:left; } #page_cont { mar ...

javascriptjqueryhtmlcss

Updating the background of the <html> tag using jQuery

Is there a way to modify this CSS using jQuery? html { background: yellow; } Attempting the following code does not yield the desired results: $('html').css('background','red'); ...

jquerycss

A "fresh" expression lacking a construction signature for its target is automatically assigned an "any" type

I am encountering an issue with my file notifications.service.ts that handles push notifications: import { useEffect } from 'react'; import { PushNotifications, PushNotificationSchema, PushNotificationToken } from '@capacitor/push-notificati ...

androidreactjsionic-frameworkpush-notificationcapacitor

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Isotope data-filter not working properly following an Ajax callback

I'm looking for a way to create a filter that can be dynamically updated: I have utilized the isotope javascript library in an external script file: var $container = $('.isotope'); // initialize isotope $container.isotope({ ...

javascriptjqueryhtmlajaxjquery-isotope

Show information from the console logger

I'm currently working on displaying data from a database in an HTML page. While the data is showing up in my console, I'm struggling to figure out how to present it in an HTML table format. I'm unsure about the specific function that needs t ...

phpjqueryhtml

Ways to adjust the width of grid columns within an implicit row

I am curious about changing grid columns on an implicit row. While I won't provide the exact code that I'm working on, I will offer a brief example to clarify my question. <div class='container'> <p>item-1</p> <p& ...

csscss-grid

incorrect text alignment issue on mobile devices, potentially limited to iOS as Android has not been tested

I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...

htmlcssios

What is the best way to define the validity of an ng-model within a directive?

I am struggling with a directive to validate phone numbers in AngularJS. I want the ng-model to be considered invalid if the phone number is less than 10 digits. While trying out $setValidity, I encountered an issue where it says that it's not a funct ...

angularjs

Creating customizable divider lines with text next to them using HTML in emails

How can I create an adjustable line with a word next to it, ensuring that long words do not wrap onto a second line? I want the line to stay on one line and the left side to shrink accordingly. Also, I need the text input area to be flexible so I can input ...

htmlcssemailnewsletter

Effortlessly create a seamless transition in background color opacity once the base image has finished

I've set up a div with a sleek black background. Upon page load, I trigger an API request for an image, which is then displayed in a secondary div positioned behind the main one. After this, I aim to smoothly transition the overlaying div's opaci ...

javascriptjqueryhtmlcss

PHP/HTML failing to upload extra large files

Allowing users to upload large files is causing an issue for me. I tested uploading a 22 MB file and it was successful. However, when I tried uploading a 200 MB file, it seems that the file does not enter the if block and instead returns the output from th ...

phpjqueryajaxhtml

A variety of negative () DOM Selectors

I've been trying to select a specific node using two not clauses, but so far I haven't had any luck. What I'm attempting to achieve is selecting an element whose div contains the string 0008, but it's not 10008 and also does not contain ...

javascriptjquerycssdomselector