Wrong flex for search items

Question

There is a website

but it is required

My example code (flexfail)

.crossline, .bottompart {
    flex: 1;
    /*width: 100%;*/
    /*height: 33%;*/
}

.crosslineright {
    width: 100%;
    /*margin-top: 40px;*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    /*align: right;*/
    text-align: right;
}

.close {
        margin-top: -14px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
        cursor: pointer;
        display: inline-block;
}

.dropdownwindowright {
    width: 75%;
}

.CatalogMenuSearch #SearchBlock {
    /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
    padding-top: 5px;
    /*padding-left: 25px;*/
    margin-left: 25px;
    margin-right: 50px;
    /*padding-right: 50px;*/
    display: flex;
    justify-content: flex-end;  
    height: 35px;
    border-bottom: 1px solid black;
}

#SearchInputdiv {
    height: 100%;
    width: calc(100%-35px);
    flex: 1;
}

#SearchButtondiv {
    height: 100%;
    /*justify-content: flex-end;*/
    flex: 35px;
}

#SearchButton button svg{
    vertical-align: middle;
    /*justify-content: flex-end;
    flex: 35px;*/
}

×

Tell me how to achieve the correct display of search items (as in the 2nd screenshot) (in width). In this case, it is necessary that the text entered in the input field does not fit on the magnifying glass.

ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content

user_3315333 · Answer

Here I am using a custom css styling without flexbox, instead using position: absolute. Check this.

* {
  box-sizing: border-box;
}

#input {
  border: 0;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  position: relative;
  width: 100%;
  outline: none;
  padding-right: 30px;
}

#wrapper {
  display: inline-block;
  width: 400px;
  position: relative;
}

#btn {
  display: inline-block;
  width: 20px;
  background-color: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  height: 20px;
  background-image: url('https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png');
  position: absolute;
  z-index: 2;
  right: 0;
  top: 5px;
  background-size: contain;
}

EDIT

Fixed the issue text overflowing the search icon

EDIT-2

Made the search icon as a button instead of the pseudo element

user_14170111 · Answer

In #SearchButtondiv get rid of flex: 35px. That's a wrong value. And uncomment justify-content: flex-end. Also get rid of the same property in #SearchBlock. It's unnecessary there

.crossline, .bottompart {
    flex: 1;
    /*width: 100%;*/
    /*height: 33%;*/
}

.crosslineright {
    width: 100%;
    /*margin-top: 40px;*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    /*align: right;*/
    text-align: right;
}

.close {
        margin-top: -14px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
        cursor: pointer;
        display: inline-block;
}

.dropdownwindowright {
    width: 75%;
}

.CatalogMenuSearch #SearchBlock {
    /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
    padding-top: 5px;
    /*padding-left: 25px;*/
    margin-left: 25px;
    margin-right: 50px;
    /*padding-right: 50px;*/
    display: flex;
    height: 35px;
    border-bottom: 1px solid black;
}

#SearchInput {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    flex: 1;
}

#SearchButtondiv {
    height: 100%;
    justify-content: flex-end;
}

#SearchButton button svg{
    vertical-align: middle;
}

×

Wrong flex for search items

2 Answers