Giters

Instawork / hyperview

Server-driven mobile apps with React Native

Home Page:https://hyperview.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`<behavior>` tag interferes with flexbox

jonahx opened this issue · comments

commented

This may be some kind of misunderstanding on my part, or may be a bug.

An example will explain. Here is the full code with <behavior> commented out:

<doc xmlns="https://hyperview.org/hyperview">
  <screen>
    <styles>
      <style id="MerchantList" margin="10" display="flex" borderWidth="1" justifyContent="space-between" flexDirection="row"></style>
      <style
        id="MerchantCard"
        borderWidth="2"
        borderRadius="10"
        height="100"
        margin="0"
        backgroundColor="blue"
        flex="1"
        flexBasis="0"
        flexGrow="1"></style>
      <style id="MerchantCard__First" marginRight="10"></style>
      <style id="MerchantThumbnail" height="100" width="100"></style>
    </styles>
    <body scroll="true">
      <view style="MerchantList">
        {% macro merchantCard(style='') %}
          <view
            style="MerchantCard {{ style }}" xmlns="https://hyperview.org/hyperview">
            {# <behavior action="replace" href="/_partial.xml" trigger="press"/> #}
          </view>
        {% endmacro %}
        {{ merchantCard(style="MerchantCard__First") }}
        {{ merchantCard() }}
      </view>
    </body>
  </screen>
</doc>

This produces:

If you remove the comments around the behavior tag, the width expansion created by flex / flexGrow vanishes:

Based on the docs, my understanding is that <behavior> shouldn't be affecting layout like this?

commented

Hi @jonahx ,

from your example, it looks like part of the markup is generated so I might not fully capture where your issue is, but here's something that might help you - it's a little buried in the doc, under Behaviors attributes:

Note: When an href attribute is found on an element, Hyperview wraps the element with a "tappable" view. It is possible to customize the styles applied to that wrapping view by specifying the href-style property

What I suspect is happening here, is the href on your behavior cause the additional surrounding view to wrap your content, in which case you might need to apply to it the flexbox attributes using the href-style attribute, i.e.

      <view style="MerchantList">
        {% macro merchantCard(style='') %}
          <view
            style="MerchantCard {{ style }}" href-style="MerchantCard {{ style }}">
            <behavior action="replace" href="/_partial.xml" trigger="press"/>
          </view>
          …

(I'm not sure what string goes in the variable {{ style }} - if you could repost your example with the generated XML, I can take a closer look at the styling issue you're encountering.

Let us know if this helps!

commented

Thanks! Simply changing style to href-style fixed it!