The flex-direction: row, style of the parent class under Weex will cause the width of the input tag of the subclass to change to 0, which cannot be displayed.

Today, when I was developing Weex, I found a problem. I wonder if it is unique to me.

if a parent class ( row-wrapper ) css has this attribute:

flex-direction: row;

causes the input tag element width of other subclasses to be zero all the time.
PS: is fine on the web side. If you use the weex-playground debugging tool to open it on the mobile phone, it will not display normally. Is there a partner who has the same problem?

<template>
  <div class="row-wrapper">
    <input type="text"/>
    <text>textdemo</text>
  </div>
</template>

<script>
export default {
  name: "login",
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.row-wrapper {
  flex-direction: row;
}

</style>

problem found. When the parent class sets flex-direction: row; , the input element of the subclass must set its width and height.

such as flex:1 or width:200px to display correctly, and must be added as a class class to compile correctly, it is not feasible to use element tag values directly.

I have to say it's a bit of a pit. There won't be this problem when flex-direction: colum; . It's a mystery.

Menu