Getting the svg's into the search bar
I got the icons I needed from font awesome and the container for the search is in flex row. I tried css
::before and ::after but I dont have the icons installed so I cant use a background url. Here is a pen to see what's going on
https://codepen.io/MD-2016/pen/KKBwaXy17 Replies
can't use position absolute because it breaks the flow of flex
I dont see the icon in the html.
But there are a number of ways to acheive this:
- 3 column grid - icon, input and search button
- 3 column flex
- make the parent relative and set the icon absolute and add padding to the input which matches the width of the icon
- cast the svg contents into the background image property via data url of the input and again add padding to the input which matches the width of the icon
- save the svg contents in a file and do the same as the last suggestion, but just reference the file name
Those are just a few
Really? It's an svg
This interesting though
The parent container is flex so I can't do position absolute
The position absolute solution wasnt for flex, moreso inline elements, that's why its listed as a seperate option
But it should still work with flex, you need to make the parent relative
Its possible, but probably not advised https://jsfiddle.net/6WAtQ/
SVG as Data URI for background image - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I used flex on
main and flex on searchContainerYour search container needs a position relative on it
So that the svg inside it positions itself relative to the search container, without that it does it to the body
Is 3 column flex the better approach since my goal is learning flex?
It's all a matter of preference of what the better approach is, depending on the style you are going for youd find you want to go with certain approaches.
If you want to learn flex, and want the SVG to use its native width, I'd go with a simple 3 column flex.
That way you dont need to worry about the svg bleeding into the search input and button
I'm doing a mock of the Google new tab page
No search button
But your thread is about the search bar, im confused
is it this you are replicating?
Right that's why there's no search button
I gotta add the search glass on left and Mic on right
its still a search button, its a search by voice option, so its still the same concept
Oh ok š
I'll try that 3 column flex tonight and post if there's issues
Do I need to Change the html any?
Or keep it as is?
to achieve what you want id say so yes, youd want it to be an actual search input, have the icon as a label and add a bit of A11Y (always handy to learn this at an early stage).
Ive quickly made a dummy example with flex, the search isnt a 1:1 with the real thing, but it gives you an example of how id do it if I was in your shoes. In order to make the alternative searches work you will likely use a bit of JS delegation https://codepen.io/gashydev/pen/abjdJEX
neat "
š