Determine if the html element is wrapping to a new line when zoomed in or when the text size on Windows is increased

My webpage has 2 labels displayed side by side, but due to the system text size being set at 150% (which is recommended) in Windows, the second label does not have enough space and gets pushed below the first label. I am looking for a way to determine if the second label is moving to a new line using JavaScript or CSS, so that I can adjust the content of the first label accordingly.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161150f120f0bb">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<label class="form-label fw-bold">testing out label1</label>
<label (click)="method()" class="float-end fw-bolder">
        <em class="fas fa-exclamation-circle"></em>
        testing label 2 testing
      </label>
If the second label moves below, I want to remove the text "testing out" from the first label.
Note: The issue occurs when the browser zoom level is set to 100% with the Windows text size at 150%.

javascripthtmlcsswindowsbootstrap-5

Answer №1

After replicating your scenario, I can confirm that using `getBoundingClientRect()` does indeed yield results. In my case, it showed a difference of 24.

Even when zoomed in (text only) until the second element moves to the next line, there is still a noticeable difference.

document.querySelector('button').addEventListener('click', _ => {
  [l1, l2] = document.querySelectorAll('.label');
  alert(l2.getBoundingClientRect().top - l1.getBoundingClientRect().top);
});

document.querySelector('input[type="checkbox"]').addEventListener('change', e => document.querySelector('.wrapper').classList.toggle('narrow', e.currentTarget.checked));
.wrapper {
  border: 1px dashed gray;
}

.narrow {
  width: 10em;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eff2ed">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="wrapper">
  <span class="form-label fw-bold label">testing out label1</span>
  <span class="float-right fw-bolder label">
    <em class="fas fa-exclamation-circle"></em> testing label 2 testing
  </span>
</div>

<label><input type="checkbox"> Make elements wrap</label>
<br>
<button>Get difference in top coordinates</button>

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 setting up a select dropdown in AngularJS using ng-options when the value is an object

How can I set the initial selection of a select field using ng-options? Consider the items we have: $scope.items = [{ id: 1, label: 'aLabel', subItem: { name: 'aSubItem' } }, { id: 2, label: 'bLabel', subItem: { ...

javascriptangularjs

Retrieving values from multiple inputs in NightwatchJS

Can nightwatchjs be used to retrieve values from multiple inputs simultaneously? I am looking to verify the values of several input fields at once. Your help is much appreciated. ...

javascriptseleniumnightwatch.js

What are some strategies to avoid render-blocking when CSS is loaded through HTML Imports?

I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...

csspolymerweb-componentpagespeedhtml-imports

Conceal elements with a single click of a button

How can I use jQuery to hide all li elements with an aria-label containing the word COMPANY when the Search from documents button is clicked? Here is the HTML code: <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" t ...

javascriptjqueryhtmlevent-handling

The use of 'import ... =' is restricted to TypeScript files

Error: Oops! Looks like there's a hiccup in the code... 'import ... =' is exclusive to TypeScript files. Expecting '=' here. Don't forget the ';'. Unexpected keyword or identifier popping up! package.json ...

javascriptnode.jsjsontypescriptnode-modules

Utilizing the Loess npm module in conjunction with Angular 4

I am attempting to incorporate the Loess package into my project. The package can be found on NPM and offers various regression models for data fitting. I successfully installed it using npm install loess --save, and it now resides in the node_modules dire ...

javascriptangulartypescriptnpmtypescript-typings

Geoserver does not have the 'Access-Control-Allow-Origin' header

map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = "Looks like you need to redo this :) !!!"; var view = map.getView(); var viewResolution = view.getResolution(); var source = hcm.getSource(); var url = s ...

javascripttomcatopenlayersgeoserver

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

javascriptreactjstypescriptrefreact-forwardref

The fragment shader must not declare any varyings with the same name but different type, or statically used varyings without being declared in the vertex shader. An example of this is

I'm struggling with shaders because I want the fog to be reflected in the water using Three.js sky_sun_shader. I added the following code snippet to the fragment Shader: THREE.ShaderChunk[ "fog_pars_fragment" ], THREE.ShaderChunk ["fog_fragment" ], ...

javascriptthree.jsglslshader

Concealing and Revealing a Div Element in HTML

Every time the page is refreshed, I am encountering a strange issue where I need to double click a button in order to hide a block. Below is the code snippet for reference: <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

javascripthtmlcss

What is the reason behind external JavaScript files being able to access the functions of other external JavaScript files, and what measures can

While I may not be an expert in JavaScript, I find it intriguing that within a project containing 3 JavaScript files, any of these files can access functions from the others. The real puzzle lies in figuring out how to prevent this from happening. For in ...

javascript

Sending a JSON array to a WebMethod

I encountered an issue when attempting to convert an object to a JSON array as a string, resulting in an Internal Server Error. Fortunately, the GetServerTime method is functioning properly. My goal is to send an array of objects to the server and conver ...

javascriptjqueryjsonc#-4.0webmethod

Is it acceptable to place a <figure> tag inside a <header> tag within an <article>?

Imagine having this scenario: <article> <header> <h1>Article title</h1> <p>Article kicker</p> <figure> <img class="featured-image" src="http://article.com/featured/image. ...

htmlsemantic-markup

The initialization point of the Bootstrap progress bar does not commence at 0%

I followed the code from the documentation, but my Bootstrap progress bar doesn't start from 0%. Check out the image link below for reference: <div class="row"> <div class="col-1"> Skill: </div> ...

bootstrap-5

When activating another function, Javascript failed to trim and hide the div as intended

Before adding another function (*2), my function (*1) was working perfectly. However, after adding the second function, there seems to be a conflict and now it's not working as expected. :( <script type="text/javascript> $(function() { ...

javascriptphpjquery

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular: <Switch class="switch" formControlName="answer"></Switch> One approach involves targeting the switch with checked attribute, setting its background-color and text color accord ...

cssangularnativescriptnativescript-angular

Tips for aligning spin.js spinner in the center of a bootstrap 3 modal?

I'm attempting to showcase and center the spin.js spinner within a Bootstrap 3 modal. Despite successful implementation in IE and FF using the code below, I am encountering issues in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem appears ...

htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3

Move the button text back to its original position with animation

I have a button with text that shifts to the right by 15px when hovered over. However, when the cursor is removed, the text immediately snaps back instead of smoothly transitioning back to its original position. I tried setting the ease-in-out property but ...

htmlcss

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

Is there a way to arrange four boxes inside a div so that they are positioned at the corners of the top-left, top-right, bottom-left, and bottom-right? And when you click on the box in the middle, a window opens with text. I'm looking for something s ...

htmlcssresponsive-design