What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap?

<div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="phone in topSmartPhone">
            <img src="{{phone.img}}" alt="" />
            <div class="caption">
                <h3>{{phone.name}}</h3>
                <p><strong>Size : </strong> {{phone.size}}</p>
                <p><strong>RAM :</strong> {{phone.ram}}</p>
                <p><strong>Camera :</strong> {{phone.camera}}</p>
                <p><strong>Battery :</strong> {{phone.battery}}</p>
                <p id="description">{{phone.description}}</p>
            </div>
        </li>
    </ul>
</div>

Answer №1

It seems like you might be dealing with multiple thumbnails, is that correct? If so, the CSS code for handling them would be something like this:

.thumbnail{ 
   display: inline-block;
   width: 19%; //this percentage would accommodate 5 thumbnails in a row, but adjust according to your specific needs
}

Answer №2

give this a shot.

var app= angular.module("myapp",[]);
        app.controller("ctrl",function($scope){
            $scope.items = [1,2,3,4,5];

        });
.thumbnail{
   float:left;
    width: 60px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="ctrl">
   <div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="item in items">
           
            <div class="caption">
                <h3>{{item}}</h3>
            </div>
        </li>
    </ul>
</div>
</div>

Answer №3

When using ng-repeat, it should be within a ul element and not an li.

<div class="row">
        <ul id="" class="col-md-4 col-xs-6" ng-repeat="phone in topSmartPhone">
            <li class="thumbnail">
                <img src="{{phone.img}}" alt="" />
                <div class="caption">
                    <h3>{{phone.name}}</h3>
                    <p><strong>Size : </strong> {{phone.size}}</p>
                    <p><strong>RAM :</strong> {{phone.ram}}</p>
                    <p><strong>Camera :</strong> {{phone.camera}}</p>
                    <p><strong>Battery :</strong> {{phone.battery}}</p>
                    <p id="description">{{phone.discription}}</p>
                </div>
            </li>
        </ul>
    </div>

Answer №4

delete the class="col-md-4" attribute from the ul tag and replace it with class="thumbnail col-md-12" for the li elements.

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

A centralized navigation bar featuring a logo on the left side

I am trying to create a navbar with a centered layout and a logo floated to the left side. For inspiration, check out this example: http://www.bootply.com/98314 I would like something similar to the example mentioned but instead of left-floated items, I ...

Utilizing ng-repeat, ng-grid, and ng-click in Angular: A comprehensive guide

I'm encountering an issue with populating a table using ng-repeat after a cellTemplate ng-click. cellTemplate: '<div ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>' Within this foo method, I am tryi ...

Setting up jsonReader for jqGrid Configuration

I am having trouble displaying data in my Jqgrid. The Json data is coming from a web server, so I am attempting to format it using Jsonreader as a function. Could someone please help me identify any mistakes? Thank you in advance. Here is the code for the ...

Expanding image in card to fit device width using Ionic

Currently utilizing the ionic framework and attempting to expand the image within the card to fit the device width. Referencing the example provided here, here is my current code progress. <div class="list card"> <div class="item item-avatar" ...

Deciding Between Two Columns or One Column for Your JQuery Accordion

I am currently working on customizing an Accordion that is too large in height for my liking. My goal is to convert the single column layout into a two-column display, side by side. Having multiple items in one column results in excessive height, hence t ...

Is it possible for ngIf to only hide the div without impacting the overall layout?

I utilize a left side menu and main content. <div class="row"> <div ngIf="loginUser" class="sidebar col-md-3> ....... </div! <div class="main col-md-9> ....... </div> </div> It is hidden when ...

What's the Deal with Angular's Watch Service for Monitoring Data Changes?

I have a service called SharedData which is defined like this: appServices.service('SharedData', function() { var data = {}; function setContacts(contacts) { data.contacts = contacts; }; function getContacts() { ...

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

Creating a User Registration and Authentication System with JavaScript for a Database

I'm new to the world of web development and I've encountered a bit of a challenge. I'm looking for a Javascript framework that can handle user registration and authentication with a database, similar to what I would do with PHP and MySql. I ...

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

To ensure W3C validation, I must remove the target attribute from all anchors where the target value is null. Here is the code snippet inside the body: <div> <a href="#" target="">home empty</a> <a href="#" target="blank">home&l ...

The input group addon is not displaying properly in the Mozilla browser

I am presenting the following data in a table: <table class="neo-table"> <tr> <td>Day of final discharge home</td> <td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', ' ...

Issue with custom page not displaying summary image in Moodle

Whenever I try to fetch a summary image on my customized page, it does not show the image's name and instead displays a small icon image. echo format_text($course->summary); Click here for an example image ...

unique jquery plugin accesses function from external javascript file

As a beginner, I am attempting to create a custom jQuery plugin for which I have a simple HTML form: <form id="registerForm" action = "somepage" method="post" class="mb-sm"> <div class="form-group"> <div class="col-md-12"> ...

What is the best way to extract data from a table and transmit it to the server using AngularJS?

I'm attempting to extract all the content from a table in HTML. Is it possible to retrieve all rows from one side and send them in a post request to the server? I've been struggling to figure out how to do this. Do I need to bind each row using n ...

Angular's end-to-end testing capabilities for backend systems

Is it possible to utilize Angular's e2e framework for testing web services and conducting database validations, essentially for backend testing, or is its primary function limited to front end UI testing? ...

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

I'm struggling to figure out how to display all pages in WordPress without manually adding them to a menu. Instead of creating a new menu and selecting specific pages, I want to automatically show all existing pages in the menu. For example, if I ha ...

Navigate to a different state with ui-router upon entering the page

I am implementing two wizard flows, flow A and flow B, each collecting different sets of information. states["wizard"] = { abstract: true, url: "^/wizard", controller: "wizardController", templateUrl: "wizard.html" ...

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...