CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4bootstrap-5
sohaib
sohaib

Reputation: 776

how to prevent text from changing the height of other elements

enter image description here

I have two divs and want to display the content of both divs in the same location. Since the text in the first div is longer and has an impact on where the body content is positioned, the two divs do not look alike.I want the position of second div body content like first div body content. Please see the SS that I have attached.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>


    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Upvotes: 0

Views: 402

Answers (2)

Asmoth
Asmoth

Reputation: 563

If you don't want to change the height, the only thing I can see is to cut the text or to increase the width or your elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
 <style>
span {
 width : 100%;
 word-break: break-all;
 overflow: hidden;
 position: relative;
 display: block;
 text-overflow: ellipsis;
 white-space: nowrap;
 
}
</style>
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href=""><span>Somecontent from a map function here dsdsadsadsffffffff<span></a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>


    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Upvotes: 1

Kameron
Kameron

Reputation: 10846

Remove your static height's then use the .py-3 class for 1rem of vertical padding on your .h-100 div.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>

<body style="padding: 40px">
  <div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center p-2">
      <a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>


  <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center py-3">
      <a href="">Somecontent from a map</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Related Questions