<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="input-group" id="adv-search"> <input type="text" class="form-control" placeholder="Search for snippets" /> <div class="input-group-btn"> <div class="btn-group" role="group"> <div class="dropdown dropdown-lg"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> <div class="dropdown-menu dropdown-menu-right" role="menu"> <!--Search window start from here .It will be displayed when user try to search or type--> <section class="search-window"> <!--Searching for Panel as per design--> <div class="panel panel-default panel-searching"> <div class="panel-heading">Searching for</div> <div class="panel-body"> <!--Chip start--> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <!--Chip ends--> </div> </div> <!--Suggestions panel starts--> <div class="panel panel-default panel-suggestion"> <div class="panel-heading">Suggestions</div> <div class="panel-body"> <!--Chip start--> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> <div class="md-chip"> <span>Chip chip chip</span> <button type="button" class="md-chip-remove"> </button> </div> </div> <!--Chip ends--> </div> <!--Suggestions panel Ends--> <!--Folders panel--> <div class="panel panel-default panel-suggestion"> <div class="panel-heading">Master folder</div> <div class="panel-body"> <ul class="folder-list"> <li><span class="icon-folder_empty"> </span>Important files</li> <li><span class="icon-folder_empty"> </span>Chirag's important files</li> <li><span class="icon-folder_empty"> </span>Via geneva imp files</li> </ul> </div> </div> <div class="panel panel-default panel-suggestion"> <div class="panel-heading">Sub folders</div> <div class="panel-body"> <ul class="folder-list"> <li><span class="icon-folder_empty"> </span>Important files</li> <li><span class="icon-folder_empty"> </span>Chirag's important files</li> <li><span class="icon-folder_empty"> </span>Via geneva imp files</li> </ul> </div> </div> <div class="panel panel-default panel-files"> <div class="panel-body"> <ul class="extension-icons-list"> <li class="audio-file">Chirag's important files</li> <li class="pdf-file">Chirag's important files</li> <li class="ppt-file">Chirag's important files</li> <li class="excel-file">Chirag's important files</li> <li class="text-file">Chirag's important files</li> <li class="video-file">Chirag's important files</li> </ul> </div> </div> </section> </div> </div> </div> </div> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </div> </div> </div> </div> </div> </div> </div>

body { padding-top: 50px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } section { background: white; margin: 0 auto; padding: 1em; } section h1 { margin: 0 0 2em; } .md-chip { display: inline-block; background: #e0e0e0; padding: 0 12px; border-radius: 32px; font-size: 13px; margin:0 0.5em 1em 0; } .md-chip.md-chip-hover:hover { background: #ccc; } .md-chip-clickable { cursor: pointer; } .md-chip, .md-chip-icon { height: 32px; line-height: 32px; } .md-chip-icon { display: block; float: left; background: #009587; width: 32px; border-radius: 50%; text-align: center; color: white; margin: 0 8px 0 -12px; } .md-chip-remove { display: inline-block; border: 0; height: 20px; width: 20px; border-radius: 50%; padding: 0; margin: 0 -4px 0 4px; cursor: pointer; font: inherit; line-height: 20px; font-size: 24px; } .md-chip-remove:after { color: #5e5e5e; content: 'x'; font-size: 18px; } .md-chip-remove:hover { background: transparent; } .md-chip-remove:active { background: transparent; } .md-chips { padding: 12px 0; } .md-chips .md-chip { margin: 0 5px 3px 0; } .md-chip-raised { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .search-window .panel{ border: medium none; margin-bottom: 5px; } .panel-searching.panel-default>.panel-heading, .panel-suggestion.panel-default>.panel-heading{ border-bottom: medium none; font-size: 12px; } .panel-searching.panel-default>.panel-body{ background-color: #f5f5f5; } .panel-suggestion.panel-default>.panel-heading{ background-color: #fff; } .folder-list{ padding-left: 0; margin-left: -5px; list-style: none; } .folder-list >li { display: inline-block; padding-right: 5px; padding-left: 5px; line-height: 32px; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .folder-list >li>span{ float: left; margin:0 5px 0 0; } .folder-list >li span:before { font-size:32px; } .extension-icons-list{ padding-left: 0; margin-left: -5px; list-style: none; } .extension-icons-list >li { display: inline-block; padding-right: 5px; padding-left: 0; line-height: 32px; margin:0 0 10px; } .extension-icons-list >li:before{ content: ''; display: inline-block; height: 32px; width: 32px; background-size: contain; background-repeat: no-repeat; margin-right:0.5em; float: left; } .extension-icons-list >li.pdf-file:before { background-image: url(svgs/file-formats/pdf_file.svg); } .extension-icons-list >li.ppt-file:before { background-image: url(svgs/file-formats/presentation_file.svg); } .extension-icons-list >li.audio-file:before { background-image: url(svgs/file-formats/audio_file.svg); } .extension-icons-list >li.excel-file:before { background-image: url(svgs/file-formats/spreadsheet_file.svg); } .extension-icons-list >li.text-file:before { background-image: url(svgs/file-formats/text_file.svg); } .extension-icons-list >li.video-file:before { background-image: url(svgs/file-formats/video_file.svg); } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } }