I am currently struggling with a div that contains icons and text next to them. The issue arises when the window is resized smaller, causing the images and text to overlap and appear messy. Here is how it appears in full screen:
https://i.sstatic.net/fLPy1.png
And here is the chaotic result when the window is slightly resized:
https://i.sstatic.net/EBeFi.png
Below is my CSS code:
.grid-wrap {
margin-left: -3em;
overflow: auto;
height: auto;
}
.grid-col {
float: left;
padding-left: 3em;
padding-bottom: 5px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.newspaper-col{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
}
.one-quarter {
width: 25%;
}
.one-half{
width:50%;
}
.one-third{
width: 33%;
}
.one-whole{
width: 100%;
}
Here is the HTML code:
<div style="padding-left:10px; padding-top:10px">
<ul class="grid-wrap one-whole plain">
<li ng-repeat="item in items" class="grid-col one-quarter">
<span style="display:inline-block; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak>
<p><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></p>
</span>
</li>
</ul>
</div>
I tried utilizing the solution from this StackOverflow thread and the outcome can be seen below:
https://i.sstatic.net/lJg54.png The corresponding CSS for that design is as follows:
.dashboard-section > span:nth-of-type(4n+1){
clear:both;
}
The relevant HTML code looks like this:
<div style="padding-left:10px; padding-top:10px" class="dashboard-section">
<span ng-repeat="item in items">
<span style="display:inline-block; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak>
<span><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></span>
</span>
<br ng-if="!(($index + 1) % 4)">
</span>
</div>
To provide some spacing, I added a width attribute to the parent span as shown below, but unfortunately, it did not fix the resizing issue:
<span style="display:inline-block; width:20%; cursor:pointer" data-toggle="modal" data-target="#moduleOverride" ng-value="item" ng-click="moduleOverride(item)" ng-cloak>
<span><img style="float:left; margin-right:5px" ng-src="~/{{item.ModuleStateGraphicPath}}" /><span style="font-weight:bolder" ng-bind="item.ModuleHeaderText"></span><br /><span ng-bind="item.ModuleCalculatedStateText"></span></span>
</span>
I have hit a roadblock with this issue. Any help or suggestions are highly appreciated!