Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Seeking to modify the appearance of my Angular Template by incorporating Bootstrap and a custom CSS file.

<!-- index.html -->
<div static-include="partial/example.html"></div>

The static-include directive, sourced from Stack Overflow, prevents the creation of a child scope.

<!-- example.html -->
<div class="well">
    <h6>Lists</h6>
    <div ng-repeat="column in lists">
        <dt>{{ column.name }}</dt>
        <dd ng-repeat="term in column">{{ term }}</dd>
    </div>
</div>

When using different $scope settings, the size of the div adjusts accordingly:

However, I am looking to set a maximum height. The issue with max-height is that only the well's size changes:

Is there a way to define a max height so that if something like "Gratuite" exceeds it, it will move to the right?

EDIT: Similar to this concept:

PS: Apologies for any confusion in explaining my problem; I may lack technical terminology.

PS2: The last image has been edited with Photoshop, as I do not have the solution yet.

Thank you

Answer №1

I attempted to craft a fiddle in order to mimic your circumstances. Would you be able to duplicate this and provide a more detailed example of the situation you are trying to address?

http://jsfiddle.net/rodhartzell/2AgC4/3/

HTML

<body ng-app="myApp">
        <div ng-controller="MyCtrl">
            <div class="well">
                 <h6>Listes</h6>
                <dl ng-repeat="column in lists"> 
                    <dt>{{ column.name }}</dt>
                    <dl ng-repeat="num in column.term">{{num}}</dl>
                </dl>
            </div>

        </div>
    </body>

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.lists =  [{
            "name": "Peremntion",
            "term": [2, 5, 9, 0, 11, 0, 0]
        }, {
            "name": "column 2",
            "term": [2, 5, 9, 0, 11, 0, 0]
        }];
}

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

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

`AngularJS Voice Recognition Solutions`

In my quest to implement voice recognition in an AngularJS application I'm developing for Android and Electron, I've encountered some challenges. While I've already discovered a suitable solution for Android using ng-speech-recognition, fin ...

Unable to display images on mobile devices using HTML

I recently created a website using HTML and CSS. I have successfully added images to some of the web pages, and they display properly on laptops and desktops. However, I am facing an issue where the images do not appear on small screens, even though all im ...

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

Can't remember your password but want to stay logged in?

I am currently working on a login screen and have successfully implemented basic login functionality. Now I want to enhance it by adding features like "Remember Me" and "Forget Password". How can I achieve this? Here is my controller code: angular.modul ...

Challenges with loading times in extensive AngularJS applications

We are currently tackling performance issues related to the loading time of our AngularJS application. The page takes a significant amount of time to load, and we are exploring potential causes for this delay. One factor that could be contributing to the ...

Switching templates in AngularJS

We have a unique challenge from our client who wants a responsive website, but desires to make significant content changes that may push the limits of bootstrap. Although bootstrap allows for showing/hiding blocks and adjusting their positions with offset ...

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

Angular: numerous select boxes containing duplicate options

I am facing a challenge with multiple select boxes that may contain duplicate options. My goal is to have the selections synchronized across all boxes, so if I choose an option in one box, it automatically gets selected in other boxes if they contain the s ...

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

Implementing custom CSS styles to a component in real-time with ng-style

When I use an angularjs component to create stylized pictures, the style is not applied correctly on the first visit to a page (refreshing the page shows the correct style). The CSS that should be applied is generated dynamically based on the height and wi ...

Showcasing tooltip when hovering over Font Awesome icon

My datatables grid includes some font awesome icons to represent actions like edit, delete, etc. Here's a visual representation of how they appear: https://i.sstatic.net/W0VQi.png Take a look at the accompanying HTML code: <td> <a a ...

Stop ui-router from transitioning based on an HTTP query

Is there a way to prevent a state change for a specific "to" state in ui-router without using onEnter? Let's consider the following route: .state('auth.confirm', { url: '/confirm/:resetToken', template: '<confirm-page& ...

Change the appearance of the page when it is being displayed within an iframe using CSS

How can I display a webpage differently using CSS if it is within an iframe? I would like to use jQuery or JavaScript to switch to a different stylesheet specifically when the site is being displayed within an iframe. Any suggestions on how to achieve th ...

Clojure users may wonder how to retrieve the value of a text field upon clicking a button generated with Hiccup

Within my Hiccup Clojure program, I have a requirement to extract the value of a text field whenever a user clicks on a button. Subsequently, this extracted date needs to be added to a URL. Initially, I tried utilizing "ng-model" from AngularJS for this pu ...

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

Hey everyone, I'm struggling with a script issue! I currently have a gallery of images where the opacity is set to 0 in my CSS. I want these images to become visible when scrolling down (on view). In this script, I have specified that they should app ...

Changing the background color of a React styled-component when hovered over

Is there a way to create a custom div with an interactive hover effect that changes the background color? I am using styled components and passing in the color as props, but for some reason, the hover effect is not functioning correctly. const ColorBlock = ...