How to leave vertical line of div size

Navigation
0

Well I wanted to leave the vertical line of the '' div of the main div, and let the text stay behind the line, just like the beginning. 

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material-icons.large {
    font-size: 6rem;
    width: 6rem;
    overflow: hidden;
}
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border-top: 0;
    background: #FFFFFF;
    position: absolute;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.autocomplete-suggestion {
  width: 300px;
    position: relative;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #484848;
    border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
    float: left;
    width: 100px;
    height: 100%;
    border-right: 1px solid #D7D7D7;
    background: #FFFFFF;
    margin-right: 15px;
}
<!-- Material Icons (Google) -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion">
        <div class="img"><i class="material-icons large">face</i>
        </div>
        <div class="txt">
            <div>DES NIVEA ROLL-ON FEM. SENSITIVE wer rwerwrw werwe rwer we rwerwer we r wer wer wer we rew r we PURE 50ML</div>
            TEXTO EXTRA
        </div>
    </div>
</div>
    
asked by anonymous 29.12.2016 / 21:34

2 answers

2

To get the element .img to have a height: 100% valid, it is transforming it to position: absolute and removing float: left .

The element .txt will now need a margin-left to adapt.

Result: 

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material-icons.large {
    font-size: 6rem;
    width: 6rem;
    overflow: hidden;
}
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border-top: 0;
    background: #FFFFFF;
    position: absolute;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.autocomplete-suggestion .txt {
    margin-left: 115px;
}

.autocomplete-suggestion {
  width: 300px;
    position: relative;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #484848;
    border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
    position: absolute;
    width: 100px;
    height: 100%;
    border-right: 1px solid #D7D7D7;
    background: #FFFFFF;
    margin-right: 15px;
}
<!-- Material Icons (Google) -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion">
        <div class="img"><i class="material-icons large">face</i>
        </div>
        <div class="txt">
            <div>DES NIVEA ROLL-ON FEM. SENSITIVE wer rwerwrw werwe rwer we rwerwer we r wer wer wer we rew r we PURE 50ML</div>
            TEXTO EXTRA
        </div>
    </div>
</div>
    
29.12.2016 / 21:43
0

Are you using angular material? if you are using just put <div layout="row"> with child <div flex>Item da coluna</div> .

    
29.12.2016 / 21:44
vue vue-resource $ http.get does not recognize json with [ How to overload the assignment operator in a class containing vector?