Question 354647 in Html Question posted in
Some basic documentation can be found here.

Html – Label of Input Form rounding at weird place

I am using Bootstrap for styling and created this input using the input form classes of Bootstrap

But for some reason some weird rounding between the label and the input space happens when loading the page.

enter image description here

It might have something todo with me using astro and made a component of this input but still no idea.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</span>
    </div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
</div>
Tags:

2

Answers


  1. 0

    Actually input-group-text class contain border-radius css in it by default so if you want to remove it just add one more class which is rounded-0. Please check below updated code :-

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Input Group Example</title>
    <!-- Bootstrap CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="input-group my-3 mx-auto px-4">
    <div class="input-group-prepend">
        <span class="input-group-text rounded-0 rounded-start-2" id="basic-addon1">{label}</span>
    </div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
</div>
</body>
</html>

    Let me know if it works for you or not.

    Login or Signup to reply.
  2. 0

    The input-group-prepend class is a Bootstrap 4 class. Remove the <div class="input-group-prepend"> element and the problem will be gone.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-3">
  <div class="input-group">
    <div class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
  </div>
</div>

    Note that you can use multiple elements with input-group-text in the same input group and they will be styled accordingly. You don’t need any additional CSS or classes.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-3">
  <div class="input-group">
    <div class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</div>
    <div class="input-group-text">Second text</div>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
    <div class="input-group-text">Third text</div>
  </div>
</div>

    The migration guide has a note about that change.

    Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search