Reputation: 21666

Expanding parent div on the basis of width of child div

Check out this fiddle, I have 1 parent div and 2 child divs with select box. In the second select box the 4th option has lengthy name causing the child to go out of parent div. How can I extend the parent div so that the child divs are always inside it and don't go out of the green line (of legend)?

Upvotes: 0

Answers (2)

Chickenrice

Reputation: 5727

I use inline-block to implement.

You could try this:

HTML:

<body onload="restart_capabilities_documents_lists();">
    <div id="form">
    <fieldset>
        <div>Title</div>
        <form name="manual_permissions" action="something" method="POST">
        <input type="checkbox" name="chk_create_manual" value="1" ="">
        Create new manual<br>

        <input type="checkbox" name="chk_edit_manual_properties" value="1" ="">
        Edit manual properties<br>
        <input type="checkbox" name="chk_change_manual_permissions" value="1" ="">
        Change manual permissions<br>
        <hr>

        <div class="webiso_ui_subtitle">Permissions of appro_pp per document</div>
      <div id="float_right"><a             href="javascript:restart_capabilities_documents_lists()" class="webiso_ui_button5">Reset</a></div>         
        <div id="column1-wrap">
        <div id="column1">
          <select name="capabilities" multiple="multiple" size="8">
            <option value="0">Edit</option>
            <option value="1">Move</option>
            <option value="2">Delete</option>                 
          </select>
          </div>
          </div>
     <div id="column2"><select name="documents" onchange="fix_selects()" multiple="multiple" style="auto" size="28" id="something">
      <!--  <div style="overflow-x: auto; overflow-y:scroll;;">  -->
          <!-- <select name="documents" multiple size=10 onChange="fix_selects()"> -->

            <option title="KHB_333 - Opleiding en deskundiheidbevordering" value="24">____KHB_333 - Opleiding en deskundiheidbevordering</option>

            <option title="KHB_334 - Professioneel handelen" value="25">____KHB_334 - Professioneel handelen</option>

            <option title="KHB_335 - Alfahelpenden" value="26">____KHB_335 - Alfahelpenden</option>

            <option title="KHB_34 - Fysieke omgeving en materiaal, middelen, apparatuur en inkoop personeel" value="27">___KHB_34 - Fysieke omgeving en materiaal, middelen, apparatuur en inkoop personeel</option>


            <option title="KHB_4 - Meten en analyse" value="38">__KHB_4 - Meten en analyse</option>

            <option title="KHB_41 - Bewaken en meten van processen" value="39">___KHB_41 - Bewaken en meten van processen</option>

            <option title="KHB_42 - Klant- en medewerkersraadplegingen" value="40">___KHB_42 - Klant- en medewerkersraadplegingen</option>

            <option title="KHB_43 - Afwijkingen van de zorg" value="41">___KHB_43 - Afwijkingen van de zorg</option>

            <option title="KHB_44 - Melding incidenten patiënten" value="42">___KHB_44 - Melding incidenten patiënten</option>

            <option title="KHB_45 - Afhandeling van klachten" value="43">___KHB_45 - Afhandeling van klachten</option>


            <option title="KHB_51 - Corrigerende en preventieve maatregelen" value="47">___KHB_51 - Corrigerende en preventieve maatregelen</option>

            <option title="KHB_52 - Systeembeoordeling" value="48">___KHB_52 - Systeembeoordeling</option>

            <option title="PRO - Overzicht van de procedures" value="49">_PRO - Overzicht van de procedures</option>



          </select>
          <span id="disabled">* Deleted documents</span>
          </div>
          <div id="clear"></div>

Reset Update

CSS:

#form{
margin: 3px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
#form fieldset { border:1px solid green; padding:5px 5px 5px 5px; }
#form legend {
padding: 0.2em 0.5em;
border:1px solid green;
color:green;CSS

font-size:120%;
/*text-align:right;* works only  in chrome so commenting it, using legend align=right     instead */
  }
#form  label {
  float: left;
  width:45%;
  margin-right:0.5em;
  /*padding-top:0.05em;*/
  text-align:left;
  }
  #form span{
  color: red;
  }
  input select{
  width: 35mm;
  }


#column1-wrap{
display: inline-block;
    width: 30%;
}
#column1{

}
#column1 > select{
    width: 100%;
}
#column2{
display: inline-block;
width: 68%;
vertical-align: top;
}
#column2>select{
    width:100%;
}
#column1-wrap2{

}
#clear{
    clear: both;
}

And you can try this demo

You can change the window size and the selection area will expand.

Upvotes: 1

Nitesh

Reputation: 15739

You need to remove all the floats and use display:table-cell; to achieve this.

Here is the WORKING SOLUTION

The Code:

#form{
margin: 3px 10px 10px 10px;
padding: 10px 10px 10px 10px;
    display:table;
}
#form fieldset { border:1px solid green; padding:5px 5px 5px 5px; }
#form legend {
  padding: 0.2em 0.5em;
  border:1px solid green;
  color:green;
  font-size:120%;
/*text-align:right;* works only  in chrome so commenting it, using legend align=right instead */
  }
#form  label {
  float: left;
  width:45%;
  margin-right:0.5em;
  /*padding-top:0.05em;*/
  text-align:left;
  }
  #form span{
  color: red;
  }
  input select{
  width: 35mm;
  }


#column1-wrap{
    display:table-cell;
    vertical-align:top;
}
#column1{

}
#column2{
    display:table-cell;
    width: 200px;

}
#column1-wrap2{
    margin-right:100px;
}
#clear{
    clear: both;
}

Upvotes: 2

Expanding parent div on the basis of width of child div

Answers (2)

Related Questions