html - css only half text box is showing? -
just got search button codepen, tried placing in website , boom, doesn't work! i've had mess around , can't see issue is,
what happens animations plays lovely! search bar loads, when typing, can see half text, see image below
heres code
$brand: #b3c33a; $speed: 0.5s; body { color: $brand; background-color: #333; } .search { position: absolute; top: 50%; left: 50%; margin-left: -300px; width: 600px; } svg { position: absolute; transform: translatex(-246px); width: 600px; height: auto; stroke-width: 8px; stroke: $brand; stroke-width: 1px; stroke-dashoffset: 0; stroke-dasharray: 64.6 206.305; transition: 0.5s ease-in-out; stroke-linejoin: round; stroke-linecap: round; } .input-search { position: absolute; width: calc(100% - 148px); height: 64px; top: 0; right: 20px; bottom: 0; left: 0; border: none; background-color: transparent; outline: none; padding: 20px; font-size: 50px; } .search-label { position: absolute; display: block; width: 108px; height: 108px; top: 0; left: 50%; margin-left: -54px; z-index: 100; transition: $speed ease-in-out; } .isactive { .search-label { transform: translatex(246px); } svg { stroke-dashoffset: -65; stroke-dasharray: 141.305 65; transform: translatex(0); } &.full svg { stroke-dashoffset: -65; stroke-dasharray: 141.305 65; transform: translatex(0); } } .full { .search-label { transform: translatex(246px); } svg { stroke-dashoffset: 0; stroke-dasharray: 64.6 206.305; transform: translatex(0); } } <div class="col-md-10"> <div class="search"> <svg version="1.1" viewbox="0 0 142.358 24.582"> <path id="search-path" fill="none" d="m131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407 c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218 c134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554h0"/> </svg> <label for="search" class="search-label"></label> <input type="search" id="search" autocomplete="off" class="input-search"/> </div> <script type="text/javascript"> /* inspired dribble "search..." by: anish chandran link: http://drbl.in/nrxe */ var searchfield = $('.search'); var searchinput = $("input[type='search']"); var checksearch = function(){ var contents = searchinput.val(); if(contents.length !== 0){ searchfield.addclass('full'); } else { searchfield.removeclass('full'); } }; $("input[type='search']").focus(function(){ searchfield.addclass('isactive'); }).blur(function(){ searchfield.removeclass('isactive'); checksearch(); }); </script> </div> css (not scss)
body { color: #b3c33a; background-color: #333; } .search { position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -54px; width: 600px; } svg { position: absolute; transform: translatex(-246px); width: 600px; height: auto; stroke-width: 8px; stroke: #b3c33a; stroke-width: 1px; stroke-dashoffset: 0; stroke-dasharray: 64.6 206.305; transition: 0.5s ease-in-out; stroke-linejoin: round; stroke-linecap: round; } .input-search { position: absolute; width: calc(100% - 148px); height: 64px; top: 0; right: 20px; bottom: 0; left: 0; border: none; background-color: transparent; outline: none; padding: 20px; font-size: 50px; } .search-label { position: absolute; display: block; width: 108px; height: 108px; top: 0; left: 50%; margin-left: -54px; z-index: 100; transition: 0.5s ease-in-out; } .isactive .search-label { transform: translatex(246px); } .isactive svg { stroke-dashoffset: -65; stroke-dasharray: 141.305 65; transform: translatex(0); } .isactive.full svg { stroke-dashoffset: -65; stroke-dasharray: 141.305 65; transform: translatex(0); } .full .search-label { transform: translatex(246px); } .full svg { stroke-dashoffset: 0; stroke-dasharray: 64.6 206.305; transform: translatex(0); }
that's not pure css, wouldn't output correctly in browser. used sass (http://sass-lang.com/), need compile sass css first if want use it, or pure css output (which should available if copied codepen)
Comments
Post a Comment