Question 45197 in Html Question posted in
Some basic documentation can be found here.

why my svg icon is not show in a section next to input? – Html

my icon is not showing. But if I reduce the width of my input field from 100% to 90% then it shows. What I am doing wrong ?

.flex {
  display: flex;
  align-items: center;
}

.jc {
  justify-content: center;
}
<section class="flex jc">
  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
  <input type="text" name="search">
</section>
Tags:

2

Answers


  1. 0

    Your SVG Icon is already in section tag

    Login or Signup to reply.
  2. 0

    set the icon width to 15px and the input field width to 100% – 15px

    .flex {
  display: flex;
  align-items: center;
}

.jc {
  justify-content: center;
}

.icon {
  width: 15px;
}

input {
  width: calc(100% - 15px);
}
    <section class="flex jc">
  <svg class="icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
  <input type="text" name="search">
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search