React: Div in IonItem breaks styling

Ionic Framework Ionic React
1 
<IonList>
    <IonItem>
        <div>
            ...
        </div>
    </IonItem>
<IonList>

The content inside the <div> tag will not render properly (incorrect styling). If you remove the <div> it will show just fine. I’m trying to make an IonItem that spans the entire width but with a container inside the item to span only a percentage of the width.

This problem occurs with <span>, <p>, etc. Someone asked this on StackOverflow: https://stackoverflow.com/questions/46991253/why-putting-anything-div-p-or-just-text-inside-ion-item-after-ion-input-is-n

But the answer says to tag the <div> with item-content. But as far as I can see that doesn’t exist for Ionic React? Is there any way to accomplish this?

2

can you provided the actual styling that is failing? what you have provided is not that helpful

3

List item without a <div> container:

<IonList>
    <IonItem>
        <IonIcon icon={timeOutline} />
        <IonLabel>Server Time</IonLabel>
        Hello
    </IonItem>
<IonList>

test-1
test-1986×1453 34.4 KB

List item with a <div> container:

<IonList>
    <IonItem>
    <div>
        <IonIcon icon={timeOutline} />
        <IonLabel>Server Time</IonLabel>
        Hello
    </div>
    </IonItem>
<IonList>

test2
test2986×1503 31 KB

As you can see from the example, when the <div> container is added the styling of the icon, label, and text get messed up. It looks like it’s adding each of those elements separately in a new line instead of included as part of the item content?

The code in the example is actual tested code, not psuedocode. I do not have any extra css styling.

4

ok, now what do you want it to look like? one line with icon to left and text to right?

5

Well, I would expect just adding a <div> to cause no styling change at all. But the main goal is to have the container with a width of 50%. So the list item covers 100% width but the contents of the item are 50% of that. Basically, I want it to look like the first image I posted but only using 50% of the list item. Like:

.container {
    width: 50%;
}

<IonList>
    <IonItem>
    <div className="container">
        <IonIcon icon={timeOutline} />
        <IonLabel>Server Time</IonLabel>
        Hello
    </div>
    </IonItem>
<IonList>

But this doesn’t work because any <div> added in the IonItem causes the styling error as shown in previous post.

6

still not completely understanding the desired design but i just usually create rows and columns to style my items

Screen Shot 2020-07-15 at 11.38.44 PM
Screen Shot 2020-07-15 at 11.38.44 PM774×336 10.6 KB

          <IonItem>
            <IonRow style={{ width: "100%" }}>
              <IonCol>
                <div>
                  <div className="ion-float-left">
                    <IonIcon icon={timeOutline} />
                  </div>
                  <div className="ion-float-right">Server Time</div>
                </div>
              </IonCol>
              <IonCol>
                <div className="ion-text-right">Hello</div>
              </IonCol>
            </IonRow>
          </IonItem>
7

I’ve encountered similar problem when i was trying to make IonItem elements one bellow other.

@aaronksaunders
Is there any other solution to achieve this without creation of IonGrid inside of every single item in list ?

example :

 <IonItem>
   <IonGrid>
     <IonRow>
       <IonCol>
         <IonCardSubtitle>Title text</IonCardSubtitle>
        </IonCol>
      </IonRow>
       <IonRow>
         <IonCol>
            <IonText>Some variable value</IonText>
          </IonCol>
       </IonRow>
       </IonGrid>
   </IonItem>
8 
    <IonItem>
      <IonLabel>
        <IonCardSubtitle>Title text</IonCardSubtitle>
        <IonText>Some variable value</IonText>
      </IonLabel>
    </IonItem>
1 Like
9

So solution is to wrap them in IonLabel so you can style them properly .
Nice, a bit hacky, but a lot better optimized solution then grid for every item.

@aaronksaunders Thank you

10

To me all software development can be defined as “a bit hackey” until enough people adopt it… my clients don’t care about what you and I might define as a hack, they just want their business problem solved :+1:t5: