html - Text doesn't show when a modal window has a lot of text -
i'm making modal window centered horizontally , vertically.
the problem when window has lot of text. text (top) doesn't show.
thanks.
html:
<div id="panel"> <div> 1</br> 2</br> 3... </div> </div> lot of text. </br> lot of text. </br> lot of text...
css:
body { margin: 0; } #panel { background: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; }
running code: https://jsfiddle.net/dwsr6c71/
you need add max-height = 100%
modal, make modal's height not larger, parent. here working fiddle: https://jsfiddle.net/dwsr6c71/1/
and snippet:
body { margin: 0; } #panel { background: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; } #modal { max-height: 100%; }
<div id="panel"> <div id="modal"> 1</br> 2</br> 3</br> 4</br> 5</br> 6</br> 7</br> 8</br> 9</br> 10</br> 11</br> 12</br> 13</br> 14</br> 15</br> 16</br> 17</br> 18</br> 19</br> 20</br> 21</br> 22</br> 23</br> 24</br> 25</br> 26</br> 27</br> 28</br> 29</br> 30</br> </div> </div> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br> text. </br>
Comments
Post a Comment