Appended elements missing onsen style=""



  • Hi,

    when I use this list from the theme roller:

    <ons-list-item modifier="chevron" class="plan" ng-repeat="a in [1,2,3,4,5,6,7,8,9,10]">
               <ons-row>
                  <ons-col width="80px" class="plan-left">
                    <div class="plan-date">5:30 PM</div>
                    <div class="plan-duration">1h</div>
                  </ons-col>
    
                ```
      <ons-col width="6px" class="plan-center" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}">
    
                  </ons-col>
    
                  <ons-col class="plan-right">
                    <div class="plan-name">Onsen UI Meetup</div>
    
                    <div class="plan-info">
                      <div ng-hide="a % 4 == 0">
                        <ons-icon icon="fa-phone"></ons-icon>123-456-789
                      </div>
    
                      <div ng-hide="a % 3 == 0">
                        <ons-icon icon="fa-map-marker"></ons-icon>Moscone, San Francisco
                      </div>
                    </div>
                  </ons-col>
                </ons-row>
              </ons-list-item>
    

    The onsen framework seems to add a style here.

    Before:

      <ons-col width="6px" class="plan-center" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}">
    

    After:

    <ons-col width="6px" class="plan-center col ons-col-inner" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}" style="-webkit-box-flex: 0; flex: 0 0 6px; max-width: 6px; background-color: rgb(51, 153, 255);">
                  </ons-col>
    

    When I add a new list element to the dom this style will not be added and so the design is broken.
    Although I’am using Onsen 2 and I don’t have to call ons.compile I tried it without success.

    Is there something else to do?

    Thank you!



  • Hi @Flosef2.
    In the basic case where you just have your list from the start it seems that it works fine - rgb(51, 153, 255) is #39f.

    When you add a new element I can think of 2 things which could break somehow. The first one is if there is some collision where onsen is removing the style. The second one is if just for some reason the ng-style is not being activated. While there could be some js solution (for example using $index or making sure angular knows about the last element) in this case the problem looks like a design and style issue rather than something which should be solved with javascript.

    So I would actually suggest just solving it with pure css. There is a css selector :nth-child, so you can just do .plan:nth-child(3n + 1) .plan-center and add your style there :)

    And since the solution is pure css that means that whatever you do it won’t break as long as your dom is correct.

    Sidenote: I see you’re using ons-row and ons-col inside ons-list-item - actually ons-list-item already has some sort of grid by default. If you just have elements inside with classes left, center and right you will see that they will behave in a similar way to what you currently have.

    Here’s a small demo of the suggested solution (as well as a simpler alternative without the grid elements).

    Another note: Actually I also tried your original solution with Onsen 2 RC.10 and it seems to be working fine too. Perhaps you’re adding the item in some unusual way.

    Anyway I think the css solution should be much more stable, so if you like it feel free to use it instead :)



  • @IliaSky Thank you for this nice response!

    I add elements by jQuery. Like this:

    oli = $('<ons-list-item/>', {
            'modifier':'chevron'
            ,'tappable': ""
          });
    
    or = $('<ons-row/>', {
          }).appendTo( oli );
    
    etc.......
    
    oli.appendTo( '.list');
    
    

    You think this could be a problem?


Log in to reply