Showcase text in a straight row by utilizing ng-repeat and bootstrap

My goal is to show each word on a new line, similar to how words are displayed in a hangman game. The words should be displayed as blanks.

<body ng-init="models = [['H','a','p','p','y'],['X','m','a','s']]">
 <div ng-repeat="m in models">
     <div ng-repeat="movie in m track by $index">
              <span class="control-label1">{{movie}}</span>
     </div>
    </div>
</body>

However, I want the output to be displayed vertically like this:

H a p p y
X m a s

(with space in between)

http://jsfiddle.net/hr1383/uveyfLz1/

How can I achieve this layout?

Thank you

Answer №1

Instead of using a div element, try utilizing the span element directly :)

<html ng-app>
   <body ng-init="models = [['H','a','p','p','y'],['X','m','a','s']]">
       <div ng-repeat="m in models">
          <span class="control-label1" ng-repeat="movie in m track by $index">{{movie}} </span>
       </div>
   </body>
</html>

The key point here is the css' display property. By default, div elements are "block" while span elements are "inline". This means that a div will take up the necessary height to display its content and as much width as possible before breaking to a new line. On the other hand, span elements take up only the minimal required height and width without breaking to a new line.

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

Tips for enlarging the box width using animation

How can I create an animation that increases the width of the right side of a box from 20px to 80px by 60px when hovered over? What would be the jQuery code for achieving this effect? ...

Setting Image Height with CSS

I have a div with a height of 105px. The image inside the div is 359px tall. How can I adjust the div's size to prevent cutting off the image and ensure it displays in full height? Thank you for your help! ...

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

Using AngularJS to bind models to a multidimensional array

As I am new to angular js, please bear with me. In my view, I have a grid of text input boxes that I would like to map to a 2D array in my controller or something similar in java script. The code in my view is as follows: <div ng-repeat="row in [1,2,3, ...

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

Swapping stylesheets using a hyperlink - a simple guide

Currently, I am creating a website that utilizes PHP, XHTML strict, and jQuery. The main goal is to ensure the site is adaptable for mobile and desktop devices by implementing the principles of Responsive Web Design. This involves serving different stylesh ...

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <i ...

Make sure to execute the fire directive only when ng-repeat has completed

Currently, I am utilizing owl carousel with data being fetched through an Ajax call. Once the data populates the HTML content using ng-repeat, I need to trigger the directive that initializes the owl carousel. How can I achieve this? One approach I consid ...

What is the process for uploading an image file in Node.js?

var title="this is a new title"; var content="this is some unique content"; const options = { headers: {'Accept': 'text/plain', 'Content-Type': 'application/json' } }; const data = new FormD ...

Utilize AngularJS to securely retrieve a zip file through a Spring-powered RESTful web service

AngularJs is still unfamiliar territory for me, and I'm looking to develop code that can download a zip file through a Spring-based RESTful web service upon clicking a 'download' button. The web service functionality is all set up, but I nee ...

Building forms within an AngularJS directive

I recently developed an AngularJS directive that includes a form. This form consists of a required text field along with two additional child forms. Each child form also contains a required text field. The distinguishing factor between the two child forms ...

What could be causing the Contact anchor element to not function properly?

I've been working on creating a dropdown menu for my API, but I'm having trouble getting the anchor links to function properly. I even attempted changing the "a" element to an onclick call with javascript:void(0) and added a function to open Gmai ...

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

Issue with anchor tag not functioning properly within toggle div

Can you please help me troubleshoot why the anchor tag is not functioning properly within my div elements? When I click on the first div, the second div is displayed but the anchor tag inside the first div does not seem to be working. <script> $(&ap ...

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

Why is only one tab functioning on BS3?

I recently created a messaging system using Bootstrap 3 tabs (for more information on bs3 tabs, visit ). I have customized it with vertical styling, resulting in the following setup: Currently, messages can only be sent to member Mustafa, and not to membe ...

What are the steps to modify the MIME type in order for the browser to correctly display a CSS

I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

Ways to verify the application of CSS hyphens using Chrome's developer tools

I cannot seem to get automatic hyphens to work via CSS. I have applied the following CSS: body { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } Despite adding this CSS, my text is not being hyph ...