Why is my image not covering my entire modal

Question

I'm using a modal as an image viewer from materialize CSS http://materializecss.com/. When a user clicks a button, the modal opens. The modal has an image element within it. I've set both the height and the width to 100% but I cannot figure out why there is still a line at the bottom that my image is not covering.

<div id="modal1" class="modal">
    <a id="closeIcon"><i class="fa fa-times-circle fa-2x"></i></a>
    <img class="responsive-img" id="roomImage" src="">
</div>

#roomImage{
  width: 100% !important;
  height: 100% !important;
}

As a side note, is there a reason you are using the modal component versus their [MaterialBox](http://materializecss.com/media.html) component to view images? — adriennetacke, Jul 04 '16 at 17:59

claudios · Answer 1 · 2016-07-04T03:38:52.853

0

Try to add this css inside your custom sytlesheet. This should work as expected.

CSS

.modal {
  background-color: transparent;
  padding: 0;
  max-height: 100%;
  width: 55%;
  margin: auto;
  overflow-y: hidden;
  border-radius: 2px;
}

.z-depth-4, .modal {
  box-shadow: none;
}

edited Jul 04 '16 at 03:38

answered Jul 04 '16 at 02:27

claudios

6,588
8
47
90

It is weird that this didn't fix it for me. I forgot to mention that I am using materialize css – unconditionalcoder Jul 04 '16 at 02:40
@unconditionalcoder Check my answer above, do you think that `margin: 0;` would be of any help? – Zachary Vincze Jul 04 '16 at 02:49
@unconditionalcoder Oh, sorry about that. I can't think of anything else that would be causing this other than a problem with materialize css. – Zachary Vincze Jul 04 '16 at 02:58

score 0 · Answer 2 · answered Jul 04 '16 at 02:34

Here's something I like to always use to start a website. It's a simple CSS snipet, but it works wonders.

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

I first saw this in Jekyll. Although it seems simple (and it is) it'll reset all your basic elements so that width: 100% and height: 100% will actually do what they're supposed to do.

Why is my image not covering my entire modal

2 Answers2