0

See example at https://jsfiddle.net/x7znc405/1/

If I have html like

<div id="wrapper">
<a>
  <div id="content">
  Hello World
  </div>
</a>
</div>

css 

#content {
  background-color: blue;
  width: 100%;
  height: 100%
}

a {
  width: auto;
  height: auto;
}

#wrapper {
  display: inline-block;
  height: 39px;
  width: 200px;
}

The a tag appears to not have any effective width or height. I can click on it in a browser, and it works fine.

The reason I care is that it means I have to use force:true to convince Cypress that the tag is visible and can be clicked, which obviously opens me up to issues where the tag is genuinely invisible.

Is there any way of me getting the a to 'grow' to fill the parent div?

topman3284
  • 81
  • 1
  • 4

1 Answers1

1

a tag is inline-element and width and height will not be effective on inline-elements.

So, to add width or height you can set the display property of a tag to inline-block or block as required.

Sai Krishna
  • 597
  • 4
  • 16