c***@126.com
c***@126.com
  • 发布:2022-06-28 15:36
  • 更新:2022-06-29 19:14
  • 阅读:577

【报Bug】uni-data-select与uni-forms界面冲突

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

浏览器平台: Chrome

浏览器版本: 103.0.5060.53

项目创建方式: HBuilderX

示例代码:
        <uni-forms>  
            <uni-forms-item label="AAAA BBBB" name="name">  
                <uni-data-select v-model="selectVal" :localdata="selectRange"></uni-data-select>  
            </uni-forms-item>  
        </uni-forms>  

/////  

        data() {  
            return {  
                selectVal : 'XXX',  
                selectRange : [{value:'XXX',text:'XXX'}],  
            }  
        },

操作步骤:

.

预期结果:

.

实际结果:

.

bug描述:

文字标签排版混乱,上下不对齐,选择器超出屏幕外(iPhone7尺寸)。
底层原因是uni-data-select宽度使用了静态宽度的原因。

.uni-select__input-text {  
        width: 280px;  
}
2022-06-28 15:36 负责人:无 分享
已邀请:
c***@126.com

c***@126.com (作者)

<view class="uni-select" :style="boxStyles">  

/// props  
            boxStyles: {  
                type : Object,  
                default: {  
                    width: '100%',  
                }  
            },  

//////  

    .uni-stat__select{  
        margin: 0 10px;  
        padding: initial; // remove padding  
    }  
    .uni-stat__select, .uni-select{  
        // flex: 1; // width: 100%;  
        // props:boxStyles  
    }  
    .uni-select__input-text{  
        width: initial; // remove width  
    }  
    .uni-select__input-box{  
        justify-content: space-between;  
    }  
    .uni-select__selector{  
        width: max-content;  
    }
c***@126.com

c***@126.com (作者)

为啥论坛只能编辑主题,却不能编辑回复的,好差评。。。。
还得自己F12黑科技编辑了才能删除回复,然后再重新发回复。。

要回复问题请先登录注册