0

I am trying to add a border to a widget which is working but it is not capturing the overall the wigets fields only half part is drawing a line

enter image description here

HTML:

    <p class="solid">
   <img src="log.jpg" width="20" height="20"/>

    <div class="input-group">
      <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
      </div>
    </div>

 </p>

CSS:

p.solid {border-style: solid;}
ByteHamster
  • 4,884
  • 9
  • 38
  • 53
Abdul Azeez
  • 35
  • 1
  • 7
  • 1
    You can not nest `div` into `p`, that is invalid HTML. The error correction of the browser is fixing your mistake, by closing the `p` element as soon as it encounters the starting tag of the `div`. – 04FS Oct 02 '19 at 07:05
  • are you closing

    tag?

     – Max Ahmed Oct 02 '19 at 07:06

1 Answers1

3

A paragraph is not intended as a wrapper for other block elements. The rendering engine will automatically close the <p> tag before opening the <div> that follows, therefore rendering an empty paragraph with no height, resulting in just a border without anything else. Change the paragraph to a <div> (or any other semantically feasible element) and it will work.

.solid {
  border-style: solid;
}
<div class="solid">

  <div class="input-group">
    <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
    <div class="input-group-btn">
      <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
  • Thank you Constantin. One quick question why we use .solid in css ? what . refres to ? – Abdul Azeez Oct 02 '19 at 07:39
  • `.` is the class selector. When you add `class="solid"` you can select it in CSS via `.solid`, just like you can use `id="something"` via `#something`. I'd suggest you find a beginner's tutorial for CSS that explains the very basics. :-) – Constantin Groß Oct 02 '19 at 07:44
  • If your question refers to why it was decided to use that notation - I don't know either. Maybe there's an explanation you can find on the web, otherwise you'd have to ask the inventors of CSS why they decided to use the dot and hash. ;) – Constantin Groß Oct 02 '19 at 07:46