JQuery Mobile:调整分组选择的宽度和高度

2024-01-07

我在定位分组选择之前遇到了问题,但幸运的是已修复。现在我在调整分组选择的大小、调整宽度/高度时遇到问题。如果有人可以帮助我,我将不胜感激。下面是我的代码...

这是我将其定位在屏幕上的代码,即使我添加了宽度和高度,它似乎也没有更新。我还注意到宽度根据所选项目的长度而变化。例如,当我选择“九月”时,分组选择的宽度比“三月”的宽度长。

$("#ui-5").css({'position':'absolute','left':'6.0px','top':'57.0px'});

这是实际对象的代码

<div id="ui-5">
<div class="ui-select" data-role="controlgroup" data-type="horizontal" >
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_0" name="Datepicker_0_0">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_1" name="Datepicker_0_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_2" name="Datepicker_0_2">
        <option value="1">1975</option>
        <option value="2">1976</option>
        <option value="3">1977</option>
        <option value="4">1978</option>
        <option value="5">1979</option>
        <option value="6">1980</option>
        <option value="7">1981</option>
        <option value="8">1982</option>
        <option value="9">1983</option>
        <option value="10">1984</option>
        <option value="11">1985</option>
        <option value="12">1986</option>
        <option value="13">1987</option>
        <option value="14">1988</option>
        <option value="15">1989</option>
        <option value="16">1990</option>
        <option value="17">1991</option>
        <option value="18">1992</option>
        <option value="19">1993</option>
        <option value="20">1994</option>
        <option value="21">1995</option>
        <option value="22">1996</option>
        <option value="23">1997</option>
        <option value="24">1998</option>
        <option value="25">1999</option>
        <option value="26">2000</option>
        <option value="27">2001</option>
        <option value="28">2002</option>
        <option value="29">2003</option>
        <option value="30">2004</option>
        <option value="31">2005</option>
        <option value="32">2006</option>
        <option value="33">2007</option>
        <option value="34">2008</option>
        <option value="35">2009</option>
        <option value="36">2010</option>
        <option value="37">2011</option>
        <option value="38">2012</option>
        <option value="39">2013</option>
        <option value="40">2014</option>
        <option value="41">2015</option>
        <option value="42">2016</option>
        <option value="43">2017</option>
        <option value="44">2018</option>
        <option value="45">2019</option>
        <option value="46">2020</option>
        <option value="47">2021</option>
        <option value="48">2022</option>
        <option value="49">2023</option>
        <option value="50">2024</option>
        <option value="51">2025</option>
        <option value="52">2026</option>
        <option value="53">2027</option>
        <option value="54">2028</option>
        <option value="55">2029</option>
        <option value="56">2030</option>
        <option value="57">2031</option>
        <option value="58">2032</option>
        <option value="59">2033</option>
        <option value="60">2034</option>
        <option value="61">2035</option>
        <option value="62">2036</option>
        <option value="63">2037</option>
        <option value="64">2038</option>
        <option value="65">2039</option>
        <option value="66">2040</option>
        <option value="67">2041</option>
        <option value="68">2042</option>
        <option value="69">2043</option>
        <option value="70">2044</option>
        <option value="71">2045</option>
        <option value="72">2046</option>
        <option value="73">2047</option>
        <option value="74">2048</option>
        <option value="75">2049</option>
        <option value="76">2050</option>
    </select>
</div></div>

UPDATE经过一些实验,这就是解决方案jsfiddle http://jsfiddle.net/nfGmJ/12/


在你的 css 中添加这个样式

#Datepicker_0_0-button{
  width:200px;
}

这应该是你定义它的方式 -#<id of your select>-button{}

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

JQuery Mobile:调整分组选择的宽度和高度 的相关文章

  • jQuery Mobile:Listview 筛选搜索回调函数

    嘿 我想要一个过滤器搜索 这样您输入搜索的两个字母 相应的结果就会显示在列表视图中 我无法像 jqm listview 那样加载整个列表 因为它太大了 有人可以告诉我如何做到这一点 这有点超出了我理解 API 的范围 我知道如何使用 jqu
  • Android TableLayout 宽度

    我有两列TableLayout作为滚动视图的唯一子视图 第一列包含TextViews labels 并且第二列包含EditText Spinner DateWidget等等 价值观 尽管我已指定android layout width fi
  • 由于屏幕方向变化而调整大小后,如何获取元素的新尺寸?

    我正在开发一个移动网络应用程序 在我的页面中我有一个div元素的宽度设置为 100 我需要设置这个的高度div以便高度对于设定的纵横比是正确的 例如 如果屏幕尺寸为 300 像素宽且比例为 3 2 我的脚本应该获取屏幕的宽度div 此时应为
  • Linq:Select 和Where 之间有什么区别

    The Select and WhereLinq 中提供了方法 对于这两种方法 每个开发人员都应该了解什么 例如 何时使用其中一种而不是另一种 使用一种相对于另一种的优势等 Where 查找匹配的项目并仅返回匹配的项目 过滤 gt IEnu
  • jQuery Mobile 弹出内容高度超过窗口高度

    The jQuery 移动弹出窗口 http jquerymobile com demos 1 2 0 docs pages popup 尺寸仅限于具有左右边距 15 像素 顶部和底部边距 30 像素 http jquerymobile c
  • 使用 jQuery Mobile 和响应式布局/CSS 媒体查询是否多余?

    我正在退房http mediaqueri es http mediaqueri es 今天发现这些网站非常适合移动设备 所以我想知道将 jQuery Mobile 和响应 自适应布局与媒体查询一起使用是否是多余的 因为仅使用媒体查询似乎是一
  • jQuery 插件 (DataTables) 仅在页面刷新时正确加载

    我在使用数据表时遇到问题 当我从不同页面上的链接转到带有表格的页面时 它只会加载表格的 HTML 文本 版本 没有任何 CSS 格式 也没有 JavaScript 排序 搜索等 但是 当我刷新页面时 它将完美加载 在寻找这个问题的答案后 我
  • 我应该增强客户端上的 Jquery Mobile 元素还是发送带有 data-enhance="false" 的增强标记?

    我有一个产品搜索 我正在发送回结果 每个结果都包含两个按钮 JQM 控制组 我一次发送 24 条记录 因此需要增强 24 个控制组 如下所示 div class submitButton linkBox div
  • 滚动时隐藏移动 Safari 中的地址栏 (touchOverflow)

    我想继续一些其他问题 jquery mobile如何隐藏mobile safari地址栏 https stackoverflow com questions 9798158 how does jquery mobile hide mobil
  • MySql JOINS 的优点/缺点

    当我从多个表中选择数据时 我经常使用 JOINS 最近我开始使用另一种方式 但我不确定从长远来看会产生什么影响 例子 SELECT FROM table 1 LEFT JOIN table 2 ON table 1 column table
  • MySQL #1093 - 您无法在 FROM 子句中指定用于更新的目标表“赠品”

    I tried UPDATE giveaways SET winner 1 WHERE ID SELECT MAX ID FROM giveaways 但它给出了 1093 您无法指定目标表 赠品 进行更新FROM clause 本文 ht
  • iframe 主体删除空间

    我的 iframe 风格为style width 100 几乎覆盖了页面宽度 但它在左侧和右侧留下了一个小边距 所以我添加了body margin 0px 删除空间 它有效 但问题是删除边距影响其他事物 例如段落 p inside 有没有办
  • 选择前 n 个字符相等的行(MySQL)

    我有一张带有玩家句柄的桌子 如下所示 1 N Laka 2 N James 3 nor Brian 4 nor John 5 Player 2 6 Spectator 7 N Joe 从那里我想选择第一个 n 字符匹配的所有玩家 但我不知道
  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部
  • 如何在 Jquery/Javascript 中绑定模糊和更改,但只触发一次函数?

    我试图在选择元素更改时触发函数 由于 Ipad 在 on change 方面遇到问题 我还想绑定到 blur 这在 Ipad 上工作得很好 但是我不希望两个事件都触发该函数两次 所以我需要某种挂钩来确保两个事件是否都触发change and
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • jquery CoffeeScript中绑定点击事件

    我正在开发 Rails 3 2 并使用 CoffeeScript 我对在我的应用程序中使用 jquery mobile 有疑问 我有一个像这样的html a href class follow span class ui btn inner
  • Javascript 根据选择选项更改

    内容

    Javascript 不是最好的 所以我想问一下我哪里出了问题 正如标题所示 我有一个带有 4 个不同选项的选择框 当选择一个选项时我想更改 p 带有priceesc id 的标签 这是我到目前为止所拥有的 function priceTe
  • 如何使 WordPress 主题全宽?

    我尽了最大努力 但无法通过编辑 CSS 使以下主题全宽 屏幕 如果您能向我展示或给我有关此定制的提示 我将不胜感激 http demo mythemeshop com sociallyviral http demo mythemeshop
  • 如何在changePage期间停止jQuery Mobile调用$.mobile.loading('hide')?

    我试图阻止 jQuery Mobile 在调用 ChangePage 时隐藏加载微调器 程序流程如下所示 从单击链接开始 该链接的单击事件定义如下 body delegate library link click function mobi

随机推荐

  • 编译循环依赖是如何工作的?

    我用 Java 制作了这个示例 但我认为 未经测试 它也适用于其他 所有 语言 您有 2 个文件 第一的 M java public class MType XType x MType x null 其次 另一个文件 在同一目录中 XTyp
  • GHz 至 MIPS?有人粗略估计一下吗?

    从迄今为止我所做的研究中 我了解到 MIPS 高度依赖于正在运行的应用程序或语言 但是谁能给我对 MIPS 中 2 5 Ghz 计算机的最佳猜测 或者任何其他数量的 Ghz C 如果有帮助的话 MIPS 代表 每秒百万条指令 但对于现代计算
  • 显示 Android 的返回堆栈

    为了更好地理解 Android 的行为 我想了解有关返回堆栈概念的更多信息 有没有一种方法可以按返回堆栈中的顺序列出所有活动 这还应该包括所有其他正在运行的任务 我发现 Android Studio 0 5 1 中提供了此信息 查看 gt
  • 如何在android中使用itext库阅读pdf

    我是安卓世界的新手 我厌倦了使用 eclipse IDE 创建一个 android 项目 其中我尝试在 itext 库的帮助下阅读 pdf 文件 该 pgm 未显示任何输出 请告诉我如何更正代码 以便我可以从项目中 Assets 文件夹中存
  • dataLayer.push后数据什么时候发送到google

    我有一个单页电子商务应用程序 需要设置谷歌电子商务渠道 我的应用程序在跟踪代码管理器数据层中设置漏斗步骤 文档中没有任何内容表明数据层实际发送到 Google 跟踪代码管理器的时间 window dataLayer 使用以下内容开始页面 e
  • 如何/可以在 Jasper 报告模板中使用 base64 作为图像源?

    所以在我的 jrxml 文件中我有以下内容
  • PHP 5.3 中 ++ 运算符的奇怪行为

    观看以下代码 a Test echo a 这将输出 Tesu 问题是 为什么 我知道 u 在 t 之后 但为什么它不打印 1 PHP 文档 此外 变量正在递增 或递减将转换为 适当的数值数据 类型 因此 下面的代码将 返回 1 因为字符串
  • 最小化多个仓库发货数量的算法

    我在美国有 10 个仓库 他们每个人可能有也可能没有产品 A B C D E 库存 有人从我的网站订购了全部五件商品 我想尽量减少发送的货件数量 如何确定哪些物品要从哪些仓库发货 例如 某人订购了 A B C D 和 E 我在纽约有 A 和
  • XSL - 评估条件表达式是否是“捷径”?

    给定 XSL If 语句
  • slf4j 没有 toString()

    当你做类似的事情时LOG debug Exported product 在 slf4j 中 它最终会在参数上调用 toString 例如product 由于某些原因 我无法在要用作参数的所有类上重写 toString 有些类来自第三方 ja
  • Angular $locationProvider 与 ASP.NET MVC 路由

    我正在使用 ASP NET MVC 使用 RouteCollection 类 处理路由 但我的前端是用 Angular 编写的 在某些地方我想使用 Angular 的 location 更改 url 并且我希望它支持 HTML5 所以我将这
  • QTimer::singleShot() 在给定对象的父类中查找指定的槽,而不是对象本身

    我对 Qt 还很陌生 我对现有的 Qt 应用程序做了一些简单的修改 但还没有从头开始创建任何应用程序 一般来说 我对 C 的某些方面 类继承等 也没有太多经验 我创建了一个新的基于 Qt4 的 Code Blocks 项目并对模板进行了一些
  • pandas DataFrame 到 html,使用内联样式而不是 CSS

    我正在尝试将 pandas DataFrame 作为 HTML 作为电子邮件的一部分发送 我试图使用类似的东西 import pandas as pd df pd DataFrame 1 1 2 3 2 4 5 6 def style ma
  • 消除 DateTimeFormat 和 Joda 的 DateTimeFormatter 之间细微的空白处理差异

    我们有一些现有的代码 如下所示 DateFormat dateFormats new SimpleDateFormat EEE d MMM yyyy HH mm ss Z Locale ENGLISH new SimpleDateForma
  • 当我在 .NET 5 中运行应用程序时,Serilog 不会创建日志 SQL 表

    我有 appsettings json 设置来自动创建日志表 autoCreateSqlTable true 但是 我检查了 SQL 但找不到该表 我似乎无法找到导致它无法创建和记录信息的原因 程序 cs public class Prog
  • 仅使用字符串 format() 方法的 Python 格式日期

    仅使用 python 格式化日期的快速方法是什么 format方法 我知道有一种方法可以不使用strftime 我需要更优雅的方法 我知道一个好方法 虽然不为人所知 但非常有用 您可以这样做 from datetime import dat
  • Ada 中的字符串数组

    我在 Ada95 中有一个程序 我必须在其中创建一个字符串数组 该数组可以包含可变长度的字符串 例子 我已经声明了一个数组 其中所有索引都可以存储大小为 50 的字符串 当我为上面的数组分配一个较小的字符串时 我收到 约束错误 Code p
  • 从检查堆栈中获取完全限定的方法名称

    我无法完成以下功能 def fullyQualifiedMethodNameInStack depth 1 The function should return
  • 在 Xcode 中自动多次运行测试用例

    在 Xcode 中 有没有办法让我自动运行单个测试用例 n 次 这样做的原因是我的一些 Beta 测试人员在我的应用程序中遇到了随机崩溃 我在 TestFlight 中看到崩溃日志以及堆栈跟踪 但无法重现崩溃 崩溃很少发生 但当发生时 总是
  • JQuery Mobile:调整分组选择的宽度和高度

    我在定位分组选择之前遇到了问题 但幸运的是已修复 现在我在调整分组选择的大小 调整宽度 高度时遇到问题 如果有人可以帮助我 我将不胜感激 下面是我的代码 这是我将其定位在屏幕上的代码 即使我添加了宽度和高度 它似乎也没有更新 我还注意到宽度