离子选择无标签

2024-02-24

我在同一行中有一个 Ionic 选择作为输入,因此我想显示没有标签的选择。

代码如下:

<ion-list>
      <div class="row">
        <div class="col no-padding">
          <label class="item item-input">
            <input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
          </label>
        </div>
        <div class="col no-padding">
          <label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
            <div class="input-label">G</div>
            <select ng-model="registro.tipo_id">
              <option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
            </select>
          </label>
        </div>
      </div>
</ion-list>

显示如下:

除了大小上的明显差异(我认为这是由于标签的字体大小所致?)。

如何消失标签,只留下输入和选择?

如果我删除标签:

<div class="input-label">G</div>

我得到以下信息:

Update感谢 Jess Patton 的解决方案:

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    border: medium none;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}

并将 HTML 更改为:

<label class="item item-select" name="tipo_id" ng-model="registro.tipo_id">

我得到以下结果:

它更接近所需的结果,但大小差异仍然令人担忧,不值得部署。

更新2:

更改输入填充不是一个选项,因为它是较大表单的一部分。


我想我明白了,选择仍然有效并且没有标签显示。 我用了这个html:

<div class="item item-select">
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
    </div>

和这个CSS:

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    border: medium none;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}

得到这个结果:

UPDATE: 我补充一下:

.item-select {
  height: 100%;
}

并得到这个:

更新2:终于把CSS改对了: /* 这里的样式 */

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}
.item-select {
  height: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.item-input{
  padding: 0 0 0 0;
}

看起来像这样:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

离子选择无标签 的相关文章

  • 在 Ionic、ngCordova (AngularJS) 中的 Ionic Sqlite 中调用主控制器之前打开数据库?

    我有一个函数 init DB this db cordovaSQLite openDB name pasa db cordovaSQLite execute this db CREATE TABLE IF NOT EXISTS dashbo
  • 无法获取 Ripple 会话信息

    我使用 Visual Studio 2015 RC 创建了一个 Ionic Apache Cordova 应用程序 我在自己的解决方案文件中创建了它 并且可以使用 Ripple 运行它 现在我想将文件移动到与服务器应用程序相同的文件夹中 因
  • Ionic框架和php mysql

    我是 Ionic Apahce Cordova 的新手 我创建了一个简单的应用程序 它具有静态列表视图项 但我想从 MYSQL 表获取数据并将其替换到我的静态列表中 我用谷歌搜索了一下 有人在研究它 但我不知道应该把我的 php 文件放在哪
  • 如何将 Font Awesome 添加到 Ionic 4

    有很多关于如何将 Font Awesome 添加到 Ionic 3 项目中的教程和文章 但我很难找到有关如何将 Font Awesome 添加到 Ionic 4 项目中的教程和文章 那么这就提出了一个问题 如何在 Ionic 4 项目中添加
  • Ionic 2 如何更改模态高度和宽度

    我的应用程序上有一个页面有一个模态页面 我想更改该页面的大小 我尝试使用模型属性来更改它 但它会更改所有其他页面的大小 我想要不同的不同尺寸的型号 modal inset min width 将其添加到您的app scss my modal
  • Ionic 框架:创建项目时 Ionic 构建失败 (v4.12.0)

    I have ionic安装在我的系统中 当我跑步时ionic run app tabs它安装了所有npm包 但随后提示符变为 Downloading binary from https github com sass node sass
  • 使用 org.apache.cordova.file 获取选定的文件大小

    使用 org apache cordova file 插件 我可以选择该文件并获取该文件的本机路径 之后 我必须限制用户根据文件大小选择文件 但我无法理解文件大小 我的问题是我无法使用该插件获取文件大小 为此我正在使用本教程 http th
  • 深层链接给出空路径

    我在实施 DeepLinks 时遇到问题 我可以从 myapp myapp com route 等 URL 打开该应用程序 但它不处理它的路径 它只是打开程序 我用以下命令打开它 this deeplinks route route Rou
  • 离子动态列表分隔符

    我已经被这个问题困扰了一段时间 所以我希望你能让我朝正确的方向前进 我的角度工厂返回一个看起来像这样的对象 name Fall year 20xx id some id 这是一个学期列表 每个学期都有一个对象 其中包含名称 年份和学期 ID
  • Ionic Cordova Build Android 未找到已安装的构建工具

    我在 Ubuntu 16 04 上的 Android 上构建 ionic 应用程序时遇到问题 这是我为了实现这一目标所做的一步 下载Android Studio 下载Android SDK 在 bashrc 和 bash profile 中
  • 类型“Promise”上不存在属性“finally”

    我试图对承诺使用finally 方法 但我不断收到此错误 Property finally does not exist on type Promise
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • 如何在 Ionic 3 中调整图像大小而不降低质量和目标宽度和高度?

    我想减小相机 API 拍摄的图像的大小 但质量降低不好 最好的办法是降低分辨率 但我不想对所有图像使用目标宽度和高度 例如 我希望图像宽度为 1280 图像高度按其比例自动变化 但在 API 中我应该使用精确的宽度和高度 如何通过图像比例更
  • 无法使用cordova-plugin-file-transfer上传base64图像

    我正在尝试使用 cordova plugin file transfer 将 Base64 格式的图像上传到我的服务器 但到目前为止它还无法正常工作 我的代码是这样的 photoBase64 photoBase64 replace data
  • Ionic/Cordova 应用程序中的身份验证

    首先 我不是专业人士 在我成为一名更好的开发人员的过程中 我试图了解需要什么以及如何完成为 Ionic Framework 应用程序创建注册 登录 大多数单页应用程序 SPA 在节点服务器上处理身份验证 该服务器还为客户端提供 HTML 就
  • 为什么 cordova.file.documentsDirectory 为空?

    我正在尝试使用 cordova plugin file transfer 在http ngcordova com docs plugins fileTransfer http ngcordova com docs plugins fileT
  • 为什么 Ionic 5 内容填充不起作用?

    升级到 Ionic 5 后 padding 属性不再像 Ionic 4 中那样起作用
  • 使用自定义 cordova 插件未找到类异常

    我正在开发一个打印应用程序 它使用自定义 API 通过 USB 访问打印机 因此我需要一个自定义 Cordova 插件 我开始开发它 这是一个非常好的挑战 但目前也非常令人沮丧 因为我不明白为什么我的插件不能正确使用 事情是 1 插件安装正
  • 谷歌分析与 Ionic

    我正在尝试使用 Google Analytics 添加到 Ionic phonegap Covdova 应用程序中this https blog nraboy com 2014 06 using google analytics ionic
  • HTML 标签在 Ionic 5 警报文本中不起作用

    我已将以下代码从 Ionic 3 迁移到 Ionic 5 const alert await this alertCtrl create subHeader About b this user name b message Test Mes

随机推荐