Bootstrap
Replies: 1 comment
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con Bootstrap</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="card-header">
<h3 class="card-title">Problem</h3>
</div>
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="form-group">
<label for="input1">Label with very long text that requires a line break</label>
<input type="text" class="form-control" id="input1">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="input2">short label</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="input3">Another long tag that also needs a line break</label>
<input type="text" class="form-control" id="input3">
</div>
</div>
</div>
</div>
<div class="card-header">
<h3 class="card-title">Solution</h3>
</div>
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="form-group form-adjust">
<label for="input1">Label with very long text that requires a line break</label>
<input type="text" class="form-control" id="input1">
</div>
</div>
<div class="col">
<div class="form-group form-adjust">
<label for="input2">short label</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="col">
<div class="form-group form-adjust">
<label for="input3">Another long tag that also needs a line break</label>
<input type="text" class="form-control" id="input3">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function adjustLabelHeights() {
var maxHeight = 0;
// Reset the height of the labels to recalculate correctly
$('.form-adjust label').height('auto');
// Calculates the maximum height of all labels.
$('.form-adjust label').each(function() {
var labelHeight = $(this).height();
if (labelHeight > maxHeight) {
maxHeight = labelHeight;
}
});
// Applies the maximum height to all labels
$('.form-adjust label').height(maxHeight);
}
$(document).ready(function() {
adjustLabelHeights();
$(window).resize(function() {
adjustLabelHeights();
});
});
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
If we have some divs next to each other, each one contains a label and an input, the problem is that if the label text is very long, line breaks are created that make the input sit lower than the other inputs.
Create a solution using a class to adjust the height of shorter labels and force alignment
if the view is resized and the inputs are attached to the line breaks without misaligning each other
They could natively implement a similar solution
Beta Was this translation helpful? Give feedback.
All reactions