jQuery MiniUI

标题: datepicker控件的长度高度可以修改吗? [打印本页]
作者: natty7456    时间: 2012-9-20 10:17:33     标题: datepicker控件的长度高度可以修改吗?

本帖最后由 natty7456 于 2012-9-20 10:24 编辑

<input id="txt_FPlanCommitDate" class="mini-datepicker" runat="server" width="140" />

我加了宽度，好像没反应

我加了

style="width:140px;height:50px"可以

但是宽度调整了，高度没变化

作者: factory    时间: 2012-9-20 11:06:44

高度的话需要通过修改CSS来调节
请参考http://miniui.com/bbs/forum.php? ... &extra=page%3D1
datepicker的结构要比textbox复杂,所以需要CSS修改的样式较多
datepicker一般只是填充日期,默认的高度就够了,一般没必要去修改.
作者: natty7456    时间: 2012-9-20 16:09:15

为了和别的控件高度一致达到界面统一的目的，必须要更改高度。

我用CSS或者Jquery尝试来更改其高度，为了让变化明显，我且将其高度设定为300，看看发生了什么：

设定高度前：[attach]660[/attach]
设定高度后：[attach]661[/attach]

也就是说，控件的边框线条实际没有任何的变化，但是却用空白去撑开了原来的布局

这是什么情况，难道高度不能更改吗？


作者: factory    时间: 2012-9-20 17:32:55

natty7456 发表于 2012-9-20 16:09
为了和别的控件高度一致达到界面统一的目的，必须要更改高度。

我用CSS或者Jquery尝试来更改其高度，为了 ...

改变高度请参考http://www.miniui.com/demo/#src=form/diysize.html
可以看样式的自定义都在diysize.css文件里,官网下载的demo包里面有的
作者: natty7456    时间: 2012-9-21 08:07:25

你给的链接只有改变宽度没有改变高度的。

有什么可参考的
作者: factory    时间: 2012-9-21 09:47:38

natty7456 发表于 2012-9-21 08:07
你给的链接只有改变宽度没有改变高度的。

有什么可参考的


你仔细看了样式没?高度是做过改变的,变矮了.
比默认的低了几PX
border的高度,修改mini-buttonedit-border样式
作者: natty7456    时间: 2012-9-21 10:32:48

.mini-datepicker
{
    background-position:50% 1px;
}

CSS只有这个，这是改变高度么！？

其实我现在是想增加高度
作者: factory    时间: 2012-9-21 10:35:30

natty7456 发表于 2012-9-21 10:32
.mini-datepicker
{
    background-position:50% 1px;

你看了diysize.css文件没?
  1. /* buttonedit */        
  2. .mini-buttonedit
  3. {
  4.     height:19px;
  5. }
  6. .mini-buttonedit-border
  7. {
  8.     height:17px;
  9. }
  10. .mini-buttonedit-input
  11. {
  12.     height:17px;
  13.     line-height:15px;
  14. }
  15. .mini-buttonedit-button
  16. {
  17.     height:13px;
  18. }
  19. .mini-buttonedit-icon
  20. {
  21.       
  22.     width:15px;
  23.     height:14px;
  24. }
  25. .mini-datepicker .mini-buttonedit-icon
  26. {
  27.     background-position:50% 1px;
  28. }
复制代码
作者: natty7456    时间: 2012-9-21 10:56:53

针对datepicker控件，不就只有最后一句话，是有关系的么
.mini-datepicker .mini-buttonedit-icon
{
    background-position:50% 1px;
}

现在就很直接的问，我想把datepicker高度设定成50PX，可以做到吗，做的到代码怎么写？

作者: factory    时间: 2012-9-21 11:32:25

natty7456 发表于 2012-9-21 10:56
针对datepicker控件，不就只有最后一句话，是有关系的么
.mini-datepicker .mini-buttonedit-icon
{

当然可以啊,我都把修改高度的全部CSS贴给你了啊,怎么还会说只是最后一个样式呢?
datepicker的结构不是只有一层而已,他又输入框,有buttonedit,有border框组成的,没你想象那么简单.
你就把我给你的CSS复制过去,改成你要的高度就行了.
再有问题的话你可以用IE的开发人员工具,或者firefox的Firebug来查看datepicker的结构,然后再去修改样式
作者: natty7456    时间: 2012-9-21 11:40:00

可以做到吗，做的到代码怎么写？

前半句说可以做到，后半句不敢直视呢

上面代码这么乱，怎么看的出哪一个是设定高度的，我相信你贴给别人看也没一个人能调的出来

是全部吧上带PX的地方都调成50PX么，貌似也不是啊
做控件的时候本来就应该把高度的设定给封装掉
作者: factory    时间: 2012-9-21 11:52:41

natty7456 发表于 2012-9-21 11:40
可以做到吗，做的到代码怎么写？

前半句说可以做到，后半句不敢直视呢


mini-buttonedit
是整体的高度,也就是50px;
mini-buttonedit-border
显示边框的高度,48px,因为还有上下2个边框各占1PX
mini-textbox-input是输入框的高度,要和border一样,48px;
mini-buttonedit-button 按钮的高度,44px
mini-buttonedit-icon 按钮图标 图片大小就这么大,如果你需要美观,你需要自己提供符合50px高度的图标
mini-datepicker .mini-buttonedit-icon 是设置的图标的摆放
可能说得比较晕,建议你还是用firebug或者IE的开发工具,自己去看下datepicker的结构
一般对于datepicker都是默认高度的,而且结构比较复杂,高度调整之后还要自己提供ICON才符合要求
作者: natty7456    时间: 2012-9-21 12:01:57

这么说我明白了。

可是你们不能把这个高度的设定封装一下么

要设置一个高度需要写那么多代码，谁还高兴去改呢
作者: niko    时间: 2012-9-21 18:35:57

1.一般使用者不会调整输入框的高度。
2.如果你要调整，我们提供了css的方式



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2