html - How is div's height growing as i'm adding elements to it -


can tell me making div's height increase i'm adding more , more text.i'm new css , got div site don't want height grow add more , more text.sorry asking such lame question i'm new , don't understand concepts well

here fiddle link: https://fiddle.jshell.net/nud13xnu/ css:

.full-width1{ width:37%;margin-top:30px;margin-left:10%;min- height:0px;position:relative;max-height:50px;z-index:0;; } .form-style-fake{position:absolute;top:0px;} .form-style-base{position:absolute;top:0px;z-index:0;;opacity: 0;} .form-control1{padding: 10px 50px;} .form-input1{height:50px;border-radius: 0px;margin-top: 20px;}  .truncate {  width: 250px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  } .bg-form1{ float:left;width:100%; position:relative; background: url("http://lorempixel.com/200/200/abstract/"); background-repeat: no-repeat; background-size: cover; margin-top: 0px; } .bg-transparent{  background: rgba(0,0,0,0.5);float: left;  width: 100%;margin-top: 0px; } .container1{  background: url("http://lorempixel.com/800/800/nature/");  background-repeat: no-repeat;  background-size: cover;  z-index: 0; } custom-form1{float: left;width:100%;border-radius: 20px;box-shadow: 0 0 16px #fff;overflow: hidden;   margin-top: 30%;   background: rgba(255,255,255,0.6);  } .img-section1{  float: left;width: 100%;padding-top: 15px;padding-bottom: 15px;background:   rgba(0,0,0,0.7);position: relative;  } .img-section1 h4{color:#fff;}   .color{   color:#fff;  }    .form-control1::-webkit-input-placeholder {    color:lightgray;    font-size:18px;    }   .form-control1:-moz-placeholder {     color:lightgray;     font-size:18px;    }   .form-control1::-moz-placeholder {     color:lightgray;     font-size:18px;    }   .form-control1:-ms-input-placeholder {     color:lightgray;     font-size:18px;   }

please help.

the div wraps list doesn't have specified height, grow accommodate content. if want limit height, give height or max-height value. combined overflow-y: scroll, have, make scroll if content height exceeds parent's specified height.

here i've added max-height: 300px in inline styles limit it's growth 300px.

.full-width1 {    width: 37%;    margin-top: 30px;    margin-left: 10%;    min-height: 0px;    position: relative;    max-height: 50px;    z-index: 0;    ;  }    .form-style-fake {    position: absolute;    top: 0px;  }    .form-style-base {    position: absolute;    top: 0px;    z-index: 0;    ;    opacity: 0;  }    .form-control1 {    padding: 10px 50px;  }    .form-input1 {    height: 50px;    border-radius: 0px;    margin-top: 20px;  }    .truncate {    width: 250px;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;  }    .bg-form1 {    float: left;    width: 100%;    position: relative;    background: url("http://lorempixel.com/200/200/abstract/");    background-repeat: no-repeat;    background-size: cover;    margin-top: 0px;  }    .bg-transparent {    background: rgba(0, 0, 0, 0.5);    float: left;    width: 100%;    margin-top: 0px;  }    .container1 {    background: url("http://lorempixel.com/800/800/nature/");    background-repeat: no-repeat;    background-size: cover;    z-index: 0;  }    .custom-form1 {    float: left;    width: 100%;    border-radius: 20px;    box-shadow: 0 0 16px #fff;    overflow: hidden;    margin-top: 30%;    background: rgba(255, 255, 255, 0.6);  }    .img-section1 {    float: left;    width: 100%;    padding-top: 15px;    padding-bottom: 15px;    background: rgba(0, 0, 0, 0.7);    position: relative;  }    .img-section1 h4 {    color: #fff;  }    .color {    color: #fff;  }      /*====== style placeholder ========*/    .form-control1::-webkit-input-placeholder {    color: lightgray;    font-size: 18px;  }    .form-control1:-moz-placeholder {    color: lightgray;    font-size: 18px;  }    .form-control1::-moz-placeholder {    color: lightgray;    font-size: 18px;  }    .form-control1:-ms-input-placeholder {    color: lightgray;    font-size: 18px;  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="full-width1" style="" id="mymodal">    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="z-index:0; ">      <div class="custom-form1" style=" ">        <div class="text-center bg-form1" style="width: 100%">          <div class="img-section1">            <a href="#" class=" glyphicon glyphicon-remove" style=" float: left;margin-left: 5px" onclick="document.getelementbyid('prof4').style.display='none';"></a>            <h2 style=" font-family: 'baskerville';color: white">create dummy profile</h2>          </div>        </div>        <div class="col-lg-12 col-md-12" style="max-height:300px;overflow-y: scroll;">          <a href="#" style="color:black;font-size: 24px;">            <h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> bill gates</a>          <br/>          <a href="#" style="color:black;font-size: 24px;">            <h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> coldplay</a>          <br/>          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> adam levine</a>          <br/>          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> priyanka chopra</a>          <br/>          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> taylor swift</a>          <br/>          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> sachin tendulkar</a>          <br />          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> barack obama</a>          <br />          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> shahrukh khan</a>          <br/>          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> barack obama</a>          <br />          <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> barack obama</a>          <br> <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> barack obama</a>          <br>        </div>        <div class="text-center bg-form1" style="width: 100%;">          <div class="img-section1">            <button class=" btn btn-default" id='mybtn1' style="">priority</button>            <button class=" btn btn-default" id='mybtn2' style="margin-left:21px;margin-top: 1%">work offline</button>            <button class=" btn btn-default" id='mybtn3' style="margin-top: 1%;margin-left: 21px">share</button>            <button class=" btn btn-default" id='mybtn4' style=";margin-top: 1%;margin-left:21px">leave</button>          </div>        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more