My Last Element in the div Overflows so Only Half of the Element is Visible

Question

I'm preparing my site for mobile browsers, so on Chrome Dev Tools i've tested on 320 x 568 size and i've encountered this problem.

My button element is on the bottom of the div, but half of the button is visible, other half is not.

Screenshot on the situation

I've tried to style the background (background-size etc) but the changes did not solve the issue.

What's the basic documentation / suggestion to overcome this problem?

Parent Div

<div class="view" id="activeSubstance" data-spy="activeSubstance" data-target="#activeSubstance" style="background-image: url('img/calculate_02.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"></div>

The Child

<div class="row text-center align-items-center mt-3">
 <div class="col" id="calculate">
  <button type="button" class="btn btn-cyan btn-lg disabled" id="calcButton">Hesaplayalım</button>
 </div>
</div>

Full Code

  <div class="view" id="activeSubstance" data-spy="activeSubstance" data-target="#activeSubstance" style="background-image: url('img/calculate_02.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<!-- Mask & flexbox options-->
<div class="mask rgba-stylish-light align-items-center flex-center">
  <!-- Content -->
  <div class="container">
    <div class="row mt-3">
      <!--Dropdown primary-->
      <div class="col mt-2">         
        <!--Dropdown primary-->            
        <div class="dropdown">          
          <!--Trigger-->
          <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="display: block">Etken Madde Seçimi</a>     
          <!--Menu-->
          <div class="dropdown-menu dropdown-primary" id="substanceList">
            <a class="dropdown-item">Daptomisin - <small>Cubicin</small></a>
            <a class="dropdown-item">Ertapenem sodyum - <small>İnvanz</small></a>
            <a class="dropdown-item">Flukonazol - <small>Lumen EF</small></a>
            <a class="dropdown-item">İmipenem / Silastatin sodyum - <small>Tienam</small></a>
            <a class="dropdown-item">Kolistimetat sodyum - <small>Colimycin</small></a>
            <a class="dropdown-item">Levofloksasin - <small>Tavanic</small></a>
            <a class="dropdown-item">Linezolit - <small>Zyvoxid</small></a>
            <a class="dropdown-item">Meropenem trihidrat - <small>Meronem</small></a>
            <a class="dropdown-item">Metronidazol - <small>Metronidazol</small></a>
            <a class="dropdown-item">Moksifloksasin hidroklorür - <small>Avelox</small></a>
            <a class="dropdown-item">Piperasilin sodyum / Tazobaktam sodyum - <small>Tazocin EF</small></a>
            <a class="dropdown-item">Sefoperazon sodyum / Sulbaktam sodyum - <small>Sulperazon</small></a>
            <a class="dropdown-item">Siprofloksasin laktat - <small>Ciproktan</small></a>
            <a class="dropdown-item">Teikoplanin - <small>Targocid</small></a>
            <a class="dropdown-item">Tigesiklin - <small>Tygacil</small></a>
            <a class="dropdown-item">Vankomisin hidroklorür - <small>Vancotek</small></a>
          </div>
        </div>              
      </div>
      <!--/Dropdown primary-->
      <!--Dropdown primary-->
      <div class="col mt-2">          
        <!--Dropdown primary-->            
        <div class="dropdown">          
          <!--Trigger-->
          <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="display: block">Cockcroft-Gault Denklemi</a>     
          <!--Menu-->
          <div class="dropdown-menu dropdown-info" id="methodlist">
            <a class="dropdown-item2" id="willDisable">Cockcroft-Gault Denklemi</a>
            <a class="dropdown-item2" id="willDisable2">e-GFR Hesaplayıcısı</a>
          </div>
        </div>              
      </div>
      <!--/Dropdown primary-->
    </div>
    <div class="row mt-3">
      <div class="col" style="display:none" id="notNeeded">
        <p class="note note-info wow fadeIn" id="nonDiyaText">Bu etken madde için böbrek yetmezliği durumunda doz ayarlaması gerekmemektedir.</p>
      </div>
    </div>
    <div class="row text-center align-items-center" id="cockgaulty">
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="gender1">
          <option selected>Cinsiyet</option>
          <option value="1">Erkek</option>
          <option value="2">Kadın</option>
        </select>
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="age1" class="form-control" placeholder="Yaş" aria-label="Yaş" aria-describedby="material-addon1" step='1' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="srcr1" class="form-control" placeholder="Serum kreatinini" aria-label="Serum kreatinini" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="crunit1">
          <option selected value="1">mg/dL</option>
          <option value="2">‎µmol/L</option>
        </select>
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="weight" class="form-control" placeholder="Ağırlık" aria-label="Ağırlık" aria-describedby="material-addon1" step='0.5' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 custom-control custom-checkbox mt-3" id="diya1" style="padding-left: 2.5rem;">
        <input type="checkbox" class="custom-control-input" id="diyaliz1">
        <label class="custom-control-label" id="dia1" for="diyaliz1">Hemodiyaliz Alıyor</label>
      </div>
    </div>
    <div class="row text-center align-items-center" style="display:none" id="egfry">
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="gender2">
          <option selected>Cinsiyet</option>
          <option value="1">Erkek</option>
          <option value="2">Kadın</option>
        </select>
      </div>
      <div class="col-6 col-lg-1 md-form input-group mb-3">
        <input type="number" id="age2" class="form-control" placeholder="Yaş" aria-label="Yaş" aria-describedby="material-addon1" step='1' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="srcr2" class="form-control" placeholder="Serum kreatinini" aria-label="Serum kreatinini" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-1">
        <select class="browser-default custom-select"  id="crunit2">
          <option selected value="1">mg/dL</option>
          <option value="2">‎µmol/L</option>
        </select>
      </div>
      <div class="col-6 col-lg-1 md-form input-group mb-3">
        <input type="number" id="nitrog" class="form-control" placeholder="BUN" aria-label="BUN" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="albumin" class="form-control" placeholder="Albumin" aria-label="Albumin" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-1 custom-control custom-checkbox mt-2">
        <input type="checkbox" class="custom-control-input" id="black">
        <label class="custom-control-label" for="black">Siyahi</label>
      </div>
      <div class="col-6 col-lg-2 custom-control custom-checkbox mt-2" id="diya2">
        <input type="checkbox" class="custom-control-input" id="diyaliz2">
        <label class="custom-control-label" id="dia2" for="diyaliz2">Hemodiyaliz Alıyor</label>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col" id="infoDiv">
        <p class="note note-info wow fadeIn" id="infoText"><strong>Cockcroft-Gault Denklemi </strong>ile hesaplama yaparken cinsiyet, yaş, ağırlık ve serum kreatinini değerlerini girmeniz gerekir.</p>
      </div>
    </div>
    <div class="row text-center align-items-center mt-3">
      <div class="col" id="calculate">
        <button type="button" class="btn btn-cyan btn-lg disabled" id="calcButton">Hesaplayalım</button>
      </div>
    </div>
  <!-- /Content -->
  </div>
</div>

Problem Causing "view" class CSS

.view {
 position: relative;
 overflow: hidden;
 cursor: default; }

 .view .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-attachment: fixed; }

  .view img, .view video {
  position: relative;
  display: block; }

  .view video.video-intro {
  z-index: -100;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto; }

PS: As you can see in the screenshot, "The end of the div" i've mentioned is not the end of the page, instead another DIV starts. But my button overflowed from the div above and only half of it is visible

does the parent div of the button have a height set ? or the next div have a position set ? or is the button with `position: absolute` ? THere are many questions and many possibilities why this might have happened. So you see why you need to share minimum amount of code that replicates your problem. Here. Not a screenshot or an external link — Mihai T, May 17 '19 at 12:35
@MihaiT i've added the parent and the button child, may u check it — mustafau., May 17 '19 at 12:43
does the code you shared replicate the problem ? if not, then we cannot help you. — Mihai T, May 17 '19 at 12:45
I repeat. You must share all the code necessary to reproduce your problem. Otherwise we cannot see the problem and cannot help you — Mihai T, May 17 '19 at 12:48
@MihaiT ok, so i've pasted it. Thanks for your time answering — mustafau., May 17 '19 at 12:51
:) . This is going nowhere. Please, make an example with some sample code that reproduces your exact problem. Just pasting some HTML which doesn't work and so it doesn't reproduce the problem is not helpful almost at all. Plus, i am sure you have also some CSS styles which you didn't share. Make a WORKING code snippet in the question itself . And please read the documentation Paulie shared in the first comment. — Mihai T, May 17 '19 at 12:53
@MihaiT thank you but they are so huge to copy in jsfiddle, i can never have the same situation with those tools. (i've tried it just now) Plus the problem is in the mobile version, from the snippets may you experience the 320 x 568 setting and see the problem? That's why i've tried on the screenshot. I have a GitHub repo but not sure that would help. So i guess i should give up — mustafau., May 17 '19 at 13:07
Then share the CSS related to the parent div of the button, the button, and the next div after the parent of the button. Any CSS that can influence the outcome. it may help #nevergiveup — Mihai T, May 17 '19 at 13:10
Seems to be a [clearfix](https://stackoverflow.com/questions/8554043/what-is-a-clearfix) issue. — Rhythm Ruparelia, May 17 '19 at 13:28
Ok, i will examine for the clearfix possibility and if won’t work out, will skip to the css s — mustafau., May 17 '19 at 14:29
@MihaiT i've spotted that bootstrap "view" class causes the problem so i'm examining its CSS. I've edited my question and added the related CSS if you want to have a quick look, thanks! — mustafau., May 20 '19 at 08:21
@mustafau can you please share the link to the website. i know this is not SO policy but the only way i could help is to actually see the error, and if you cannot replicate it here in a snippet, that is the only way. So please share the link here. — Mihai T, May 20 '19 at 08:44
dear @MihaiT i did not publish it but i have a gitHub repo if it helps.. me. I'm still on development process — mustafau., May 20 '19 at 08:59
@MihaiT i've solved it! The standart CSS effecting this section normally tells height to be 100%, then at media (max-width: 740px) tells the page height to be 100vh. If i make one of them 110% or 105vh, it resolves. May you suggest a more professional - flex solution, like auto.. which i won't increase the numbers depending on the content load. Thanks! — mustafau., May 21 '19 at 07:06

score 1 · Accepted Answer · answered May 18 '19 at 04:59

1

close the div class="view" may be your problem resolved

answered May 18 '19 at 04:59

Ritesh pandey

69
4

Hey Ritesh, that has solved my problem but the page has collapsed in desktop (wide-screen). So i've understood that i have to examine the view class, provided by bootstrap. Thumbs up! – mustafau. May 20 '19 at 06:54

My Last Element in the div Overflows so Only Half of the Element is Visible

1 Answers1