AngularJS: Creating a dual-column layout with alternating styles

Question

AngularJS: Creating a dual-column layout with alternating styles

Struggling to create a two-column layout that repeats in AngularJS using a JSON object of image data. I'm aiming for a display of images in a side-by-side format, but my odd/even logic seems to be off no matter what adjustments I make. Can anyone point out where I might be going wrong?

.left {
    float: left !important;
    width: 50% !important;
}
.right {
    float: right !important;
    width: 50% !important;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left,
    .right {
        float: none;
        width: auto;
    }
}

<div ng-repeat="issue in issues">
  <div ng-if="$even" class="group">
    <div class="left" ng-if="$even">
      <img src="{{ issue.image }}" ng-src="{{ issue.image }}">
    </div>
    <div class="right" ng-if="$odd">
      <img src="{{ issue.image }}" ng-src="{{ issue.image }}">
    </div>
  </div>
</div>

css angularjs onsen-ui responsive

Answer 1

Answer №1

The problem with the code is that you have enclosed your logic inside

<div ng-if="$even" class="group">

This div is limiting the display of odd logic divs.

Instead of using two separate divs, I would suggest using the ngClassEven and ngClassOdd directives. Also, remove the wrapper div with the ng-if="$even" condition.

<div ng-repeat="issue in issues">
    <div ng-class-even="'left'" ng-class-odd="'right'">
        <img ng-src="{{ issue.image }}">
    </div>
</div>

Answer 2

The problem with the code is that you have enclosed your logic inside

<div ng-if="$even" class="group">

This div is limiting the display of odd logic divs.

Instead of using two separate divs, I would suggest using the ngClassEven and ngClassOdd directives. Also, remove the wrapper div with the ng-if="$even" condition.

<div ng-repeat="issue in issues">
    <div ng-class-even="'left'" ng-class-odd="'right'">
        <img ng-src="{{ issue.image }}">
    </div>
</div>

Answer 3

Answer №2

It seems like you already have the answer you need, but here are some other options that might come in handy:

You could consider using ng-class for more flexibility in different situations. For example:

<div ng-repeat="issue in issues" ng-class="{left: $even, right: $odd}">
  <img ng-src="{{ issue.image }}">
</div>

or

<div ng-repeat="issue in issues" ng-class="$even ? 'left' : 'right'">
  <img ng-src="{{ issue.image }}">
</div>

Keep in mind that ng-class can work alongside the class property, so you can also include something like class="item".

If it's a styling issue, you might want to consider solving it with CSS. If you're comfortable not supporting IE 6-8, you can use the nth-child selector:
```
:nth-child(odd) { ... }
:nth-child(event) { ... }
```

Since both my and Pankaj's solutions removed your group class, here is a simpler CSS alternative:

.item {
    float: left;
    width: 50%;
}
.left {
    clear: left;
}
@media screen and (max-width: 480px) {
    .item {
        float: none;
        width: auto;
    }
}

Alternatively, if you're open to modern solutions and don't need JavaScript at all, you could try using flexbox:

.parent {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 0 0 50%;
}
@media screen and (max-width: 480px) {
    .item {
        flex-basis: 100%;
    }
}

Answer 4

It seems like you already have the answer you need, but here are some other options that might come in handy:

You could consider using ng-class for more flexibility in different situations. For example:

<div ng-repeat="issue in issues" ng-class="{left: $even, right: $odd}">
  <img ng-src="{{ issue.image }}">
</div>

or

<div ng-repeat="issue in issues" ng-class="$even ? 'left' : 'right'">
  <img ng-src="{{ issue.image }}">
</div>

Keep in mind that ng-class can work alongside the class property, so you can also include something like class="item".

If it's a styling issue, you might want to consider solving it with CSS. If you're comfortable not supporting IE 6-8, you can use the nth-child selector:
```
:nth-child(odd) { ... }
:nth-child(event) { ... }
```

Since both my and Pankaj's solutions removed your group class, here is a simpler CSS alternative:

.item {
    float: left;
    width: 50%;
}
.left {
    clear: left;
}
@media screen and (max-width: 480px) {
    .item {
        float: none;
        width: auto;
    }
}

Alternatively, if you're open to modern solutions and don't need JavaScript at all, you could try using flexbox:

.parent {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 0 0 50%;
}
@media screen and (max-width: 480px) {
    .item {
        flex-basis: 100%;
    }
}

AngularJS: Creating a dual-column layout with alternating styles

Answer №1

Answer №2

Similar questions

The white background of the div conceals the shadow of the Bootstrap navbar

Is it the right time to dive into HTML5 & CSS3?

The functionality of the AngularJS dropdown becomes unresponsive when placed within a dialog box

The use of the display property with inline-block is not functioning correctly on mobile devices

hiding an "input type="file" element by using a button to conceal it

When Node.js meets Angular, it results in the error message: "Uncaught ReferenceError: require is

What function does the sx prop serve in Material UI?

Is polymer routing the best choice for large-scale websites?

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

Expanding across the entire horizontal space, excluding any space allocated for

When a user scrolls over an element with a data-attribute,

"Enhance your web application with the powerful combination of Webix and Angular

Retrieving data from MongoDB and saving it to your computer's hard drive

Troubles with caching on Amazon S3

What is the best way to incorporate additional list items into a field input?

Issues with JQuery OnClick Function Detected

CSS: When using the float: right property, the container does not grow to

html distinguishing between various fields within a form

Kendo UI NumericTextBox does not properly handle displaying zero values

Let us know when the information on a different tab is updated