What is the best way to position scale descriptions correctly?

The alignment of the Low and High scale descriptions over the first and 7th option in the image below is not as precise as I had hoped. While attempting to create elements with styles that match the scale closely in Bootstrap, I encountered difficulties in centering "High" properly. Adapting styles for different screen sizes proved to be a challenge, especially considering the need for additional descriptions and staggering them over two rows in the future.

I am seeking a versatile solution that can accommodate varying screen sizes and multiple descriptions effortlessly. One approach that seems viable involves calculating an absolute position using JavaScript/jQuery. By determining the center of the first option and adjusting it accordingly, I could potentially achieve the desired alignment. However, the process of finding the width of the displayed description and making further adjustments may be necessary.

An alternative possibility lies in dynamically adjusting the class on the parent element based on the number of columns present (in this case, 7). This method, achievable through Bootstrap, might offer a more streamlined approach to resolving the alignment issue effectively.

Although I intend to explore these solutions further, I welcome any suggestions or insights that could provide a more efficient resolution to this problem.

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

javascripthtmljquerycssbootstrap-4

Answer №1

I'm not sure how versatile those circular indicators should be, but here's a concept that could assist you:

<style>
    .circle-row {
        margin-top: 20px; /*required for label*/
    }
    .circle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 1px solid blue;
        border-radius: 50%;
    }
    .circle:not(:first-child) {
        margin-left: 20px;
    }
    .circle-row .circle:first-child:after,
    .circle-row .circle:last-child:after {
        position: absolute;
        width: 100px;
        text-align: center;
        top: -20px; /*required for label*/
        left: 50%;
        transform: translateX(-50%);
        word-break: keep-all;
    }
    .circle-row .circle:first-child:after {
        content: 'low';
    }
    .circle-row .circle:last-child:after {
        content: 'high long label';
    }
</style>

<div class="circle-row">
    <div class="circle"><span>1</span></div>
    <div class="circle"><span>2</span></div>
    <div class="circle"><span>3</span></div>
    <div class="circle"><span>4</span></div>
    <div class="circle"><span>5</span></div>
    <div class="circle"><span>6</span></div>
</div>

Check out the code in this JSFiddle: http://jsfiddle.net/0foyL3g1/

This CSS code adds labels to the first and last circles. The labels are absolutely positioned, so a fixed width (100px) is included if the label needs to be wider than the circle (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

What is the best way to consolidate all app dependencies into a single package?

Recently, I came across Cory House's ingenious solution for package management in Node.js during his informative presentation. In their project portfolio, House's team maintains a package called Fusion, which serves as a central repository for a ...

javascriptnode.jsnpm

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

javascriptjquerycssangularjsvalidation

Although the xpath simulates a click on the button, it does not actually perform any action

I've been diligently working on an automation test suite for a web application that can be quite temperamental. Following a recent UI update, I decided to run some tests to ensure the GUI, buttons, and xpaths were functioning as expected. The night b ...

javascriptjavahtmlseleniumxpath

Bootstrap: Display a single product on the Carousel Product Slider for the smallest view

I found an example I'm using at this link: I noticed that when I resize my BrowserWindow, the boxes start to shrink. However, when the width reaches about 990px, the single products are rearranged in a 4-block layout from the initial width. Is there ...

javascriptjquerycsstwitter-bootstrapcarousel

The HTML file seems to be having trouble connecting to the JavaScript file

I am currently working on a small, fun website project and have an HTML file along with a JavaScript file in the same directory. However, my HTML seems to be unaware of the existence of my JavaScript file. It fails to execute the function during the load e ...

javascripthtml

The most effective method for modifying a prop in VueJS without altering the parent's data

In the main Vue component, there is an object named user. If I pass this user object as a prop to a child component: <child :user="user"></child> When updating user.name in the child component, the changes also reflect in the parent componen ...

javascriptlaravelvue.js

When dragging and dropping in react-flow-renderer, make sure to duplicate the node

I am working on implementing a feature where the original node remains in its position while allowing drag and drop functionality to create a new node at the drop location. The original node should stay at its initial position. When dragging a duplicate n ...

javascriptreactjsdrag-and-drophtml5-canvasreact-class-based-component

The stretched link in the card is not expanding as expected

I'm looking to achieve this effect Check out my code with added Bootstrap columns and rows The link in the code is not stretched as expected, it appears as a standard button link. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ ...

htmlbootstrap-4bootstrap-cards

The best way to upload a file using the blueimp file upload plugin in a single attempt

I've implemented the bluimp jQuery-File-Upload-plugin on my website. Everything works fine when selecting and uploading files, but I'm facing an issue where if I try to upload additional files without refreshing the page, the previously uploaded ...

javascriptjqueryfile-uploadblueimp

Issue with detaching Ember and jQuery plugins

I have encountered an issue in my Ember app while attempting to update the DOM by detaching an element and appending it elsewhere. var comp = Ember.$(this.element).detach(); Ember.$("#some-sec").append(comp); After performing this operation, the previous ...

javascriptjqueryember.js

Is there a way to execute a POST command in HTML without utilizing a form tag?

Currently, I have a form that gathers input from the user and redirects to a new page upon submission by clicking a button. However, I am looking for a way to automatically open this destination page when the current page loads, without the need for manual ...

htmlposttags

Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up. Is there a way to remove the undefined text so that it does not show up in the pop-up? ...

javascripthtmlcssjson

The benefits of utilizing `calc()` compared to `transform` for positioning elements

When deciding between using calc() or the transform property for placing an element, is there a specific reason to choose one over the other when the size of the element is already known? For instance... .element { bottom: 100%; transform: translateY ...

csscss-transforms

My hosting provider is not allowing the Express server to serve static files

I am facing an issue where my Express.js app is serving my js file locally, but on my hosting platform, I am unable to access the js file. var express = require("express") var app = express() var path = require("path") var bodyParser = ...

javascriptnode.jsexpresshosting

ng-bind-html behaving unexpectedly

index.html <div ng-bind-html="htmlElement()"></div> app.js $scope.htmlElement = function(){ var html = '<input type="text" ng-model="myModel" />'; return $sce.trustAsHtml(html); } However, when attempting to retrieve t ...

javascriptangularjswebangularjs-directiveangular-ui

What is the best way to retrieve the name of an element or component using JavaScript

I'm currently working on a webpage that includes ASP.NET panels and JavaScript which retrieves all components present on the page: var items = Sys.Application.getComponents(); My goal is to obtain the name/ID of each element stored in the 'item ...

javascriptasp.net

Does ReactJS demonstrate ingenuity when it comes to calling the render method?

Despite not utilizing any of the props supplied to the component, will it still re-render when the props change? class MyComponent extends React.Component { constructor(props) { super(props); const { propValue } = props; // do something wi ...

javascriptreactjs

Transmitting HTML content to the browser from the client using Node.js

Quoted from: Book - "Getting MEAN with Mongo, Express.." When it comes to responding to requests in your application by sending HTML to the browser, Express simplifies this process compared to native Node.js. With support for various templating e ...

javascriptnode.jsangular

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

javascripthtmlwebsocket

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

javascriptnode.jsmongodbexpressmongoose