divs that are dynamically arranged and responsive, with text rotated at a 90-degree angle

I have been attempting to achieve a specific appearance.

https://i.sstatic.net/i6Ylz.png

However, the only way I have managed to accomplish it is with a transform (which seems to be causing an issue). I cannot seem to find any other methods for rotating text...

https://i.sstatic.net/FNdUB.png

<div class='header-container' layout='row' layout-align='center'>

    <div flex='70' class='create-header' layout='row' layout-align='center'>
        <div ng-repeat='member in members' layout-fill layout='row' layout-align='start'>
            <div flex class='table-header'>{{member.name}}  {{member.instrument1}}</div>
            <div ng-hide="member.instrument2 == ''"class='table-header'>{{member.name}}  {{member.instrument2}}</div>
        </div>
    </div>
</div>

div.table-header {
    transform: rotate(-90deg);
    white-space: nowrap;
    /*margin-right: 40px;*/
    /*width: 13px;*/
}
cssangularjsmaterial-design

Answer №1

After some trial and error, I finally achieved the desired outcome by making a few adjustments. There is still some fine-tuning needed for optimal display on larger screens, but setting the width of the div to match the smallest box below it was key.

<div flex='70' class='create-header' layout='row' layout-align='center'>
        <div ng-repeat='member in members' flex layout='row' layout-align='start'>
            <div flex class='table-header'>{{member.name}}-{{member.instrument1}}</div>
            <div flex ng-hide="member.instrument2 == ''"class='table-header'>{{member.name}}-{{member.instrument2}}</div>
        </div>
    </div>

div.table-header {
    transform: rotate(-45deg);
    white-space: nowrap;
    /*height: 140px;*/
    /*margin-right: 40px;*/
    width: 20px;
}

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

Extracting data from a JSON object using Angular

Recently, I've been delving into the world of AngularJS and encountered a hurdle with LocalStorage. After spending numerous hours trying to figure out how to save data locally, I believe I have finally got it working as intended. Now, my next challeng ...

javascriptarraysangularjsionic-framework

Creating a dynamic select box that changes based on data in Angular

There is a select box on my page that is populated using ng-repeat with data from an array. The array includes first names, last names, and user names. By default, I want the select box to display the first and last names. However, if these fields are empt ...

htmlangularjs

directive still running despite attempting to stop the service

In my modal window, there is a directive that utilizes a service to make HTTP requests at regular intervals using $interval. However, even after closing the modal window, the service continues to run and make requests every 30 seconds. Is there a way to ...

javascriptangularjsangular-ui-bootstrap

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

javascriptcssreactjsgatsby

Customize the background color of the body and navbar in Bootstrap 5

Here is a snippet of the HTML code I am working with: <nav class="navbar navbar-expand-lg navbar-dark bg-success "> <div class="container-fluid"> <div class="d-flex justify-content-between w-100" style=&qu ...

cssnavbarbootstrap-5background-color

Applying ng-class based on conditions to icons within table cells

In my table, I am using ng-repeat to bind cells with data. One cell contains edit, save, and delete icons. When an order is posted, the delete/save icons should be disabled and displayed in a different color. While I can disable the click event of the icon ...

javascriptcssangularjs

Is it possible to adjust the vertical background-position independently?

While creating a navigation bar using the <ul> element, I have come up with the following CSS code: .nav { list-style: none; background: url(/images/nav.png) no-repeat; width: 666px; height: 60px; } .nav li { font-size: 0px; backgr ...

htmlcssw3c

Testing AngularJS components using Jasmine and RequireJS

I'm facing challenges with setting up unit tests for an Angular JS app using Jasmine and RequireJs. I've set up a Plunker example here The issue revolves around creating a module. When I define the Angular module within my controller, like this ...

angularjsrequirejsjasmine

HTML links remain enclosed in a box even after the code has been finalized

Hey there, I have written this code and for some reason, every link shared after it is displaying with a black background. I'm new to coding and can't seem to figure out what I'm doing wrong. Any help would be greatly appreciated. a:link, ...

htmlcss

Print the content from the selected tab in AngularJS UI tab

In my AngularJS application, I have implemented nested tabs and encountered an issue. I am trying to enable users to print the selected content list from both parent and child tabs. Is there a way to achieve this so that when a user clicks on "print list ...

javascriptangularjs

Striving to create a responsive fixed sidebar using HTML and CSS

My HTML page has a left side vertical navbar with a fixed position, so it stays in place when I scroll down the other div containing a guide with text. I'm facing issues with making it responsive due to its fixed position. Is there a workaround for th ...

css

Various options can be chosen to alter the margin

$('#cpseltop').change(function() { var a = $(this).val(); $('.cpselhide').hide(); $('#cpsel' + a).show(); }); .cpselect{ display:block; border:1px solid #999; border-radius:9px; outline:none; width:100%; padding:2px 5px; curso ...

javascripthtmlcss

The Angular $http.post() successfully communicates with the server, however, it does not trigger any alerts within

Currently facing an issue with my angular code. I am using $http.post to send data to a php file that then saves the information into a database. Below is my controller: app.controller('send_data', function($scope, $http) { $http.defaults.he ...

javascriptphpangularjs

Various hues blending and intertwining with one another

https://i.stack.imgur.com/zLrNK.png Could someone please clarify what is happening here? I'm attempting to change the background color to dodgerblue, but for some reason, the white background color is still showing through. Below is the code snippet ...

htmlcssangular

selenium encounters an "option element does not belong to a select" exception

Currently, I am working on creating automation using Selenium for an Angular 2 application. One of the functionalities in this application involves a dropdown that filters options as the user starts typing in a designated field. The HTML structure for this ...

angularjsselenium

JavaScript: utilizing 'this' and onClick events

Recently, I created a basic slideshow with 4 images where upon clicking, the selected image displays in a larger div box. The functionality is quite straightforward, but if you have any queries, feel free to ask. As of now, with only 4 images in the slides ...

javascriptjqueryhtmlcss

Retrieve Image Data by Clicking on Canvas at Precise Coordinates

JS Fiddle Link I'm attempting to implement functionality where a canvas with a linear gradient can be clicked, capturing the image data at that specific point. Additionally, I aim to position a yellow picker relative to the click point on the canvas ...

jquerycsshtml5-canvasgetimagedata

Use ng-repeat to display data in two separate rows

<tr ng-repeat=x in y> {{X. row data}} </tr> displaying first-row-data at index 0, then showing partial data from second row at index 1 followed by remaining data at index 1 Is it possible to achieve this format? Such as displaying rep ...

angularjsangularjs-ng-repeat

Ways to prevent the hover state from activating when the mouse is in the corner of a circular QPushButton

I'm working on customizing a QPushButton that has round corners: https://i.stack.imgur.com/g8zfs.png When the mouse hovers over the button, I want to change its style: https://i.stack.imgur.com/SDm79.png To achieve this, I utilized setStyleSheet f ...

cssqthoverborderqtstylesheets

Is it possible to include padding within a textarea element?

Is it possible to add some left margin inside a textarea? I would like there to be some extra space because I am using an image icon as my button within the textarea, and when I type, the words end up covering the image. <div id="inputBox"> < ...

htmlcss