I have seen similar questions asked before, but none of the solutions I found have worked for me so far.
Here are some key parts of my index.html file:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<body>
<div ng-view>
<!--MY CONTENT HERE-->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
I have successfully loaded my content into <div ng-view>, but the height is not adjusting to the full screen. It seems to only adjust based on the content inside.
This is a snippet of the loaded content:
<div class="parent">
<div class="topcoat-list__container scroller">
<ul class="topcoat-list list">
<li class="topcoat-list__item">
</li>
</ul>
</div>
</div>
Here is the CSS I am using:
html, body, .parent { height: 100vh; width: 100%; margin: 0; /*position:absolute;*/}
I have tried setting the height to 100% with position:absolute;, but it did not work as expected. My loaded content also utilizes the topcoat library, which I don't believe should be causing any issues.
If anyone can offer assistance, I would greatly appreciate it. Thank you in advance for your help.