Issue
I have 2 labels side by side and because of the system text size 150%(which is recommended) in the windows, the second label is not having enough space and it floats below. I just want to just find out if the second label is going into the new line or not using javascript or css. So that I can change the 1st label accordingly.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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>
Note: the browser will be on 100% zoom only when the windows is having text size of 150%.
Solution
I recreated your situation and using getBoundingClientRect()
does work. For me it returns 24 as a difference.
Even if I zoom (text-only) until the second element completely wraps into the second line, it’s providing a 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/bootstrap@4.3.1/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>
Answered By - Andy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.