首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Q输入大小问题

Q输入大小问题
EN

Stack Overflow用户
提问于 2022-11-04 08:48:40
回答 1查看 19关注 0票数 0

我有一个日期选择器在里面

代码语言:javascript
运行
复制
          <q-td>
           <q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
              <template v-slot:append>
              <q-icon name="event" class="cursor-pointer" size="xs">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-date v-model="dateRange" range>
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat/>
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          </q-td>

默认情况下,框的大小非常小,只有文本的一部分是可见的。

在DevTools上,我将CSS规则更改为

代码语言:javascript
运行
复制
.q-field__native, .q-field__input {
    width: 100%;
}

代码语言:javascript
运行
复制
.q-field__native, .q-field__input {
    width: auto;
}

它在这里运行得很好,但是当然,它会把页面上的其他Q字段搞乱。

有什么风格或类,我可以用来使这个Q输入更大,使文本可见吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-04 09:43:44

代码语言:javascript
运行
复制
     <q-td style="min-width: 300px">
       <q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
          <template v-slot:append>
          <q-icon name="event" class="cursor-pointer" size="xs">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-date v-model="dateRange" range>
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat/>
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
      </q-td>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/74314334

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档