anyone know how to fix the mold-rounded so that it looks good on the ipad

answered 2013-04-18 12:34:39 +0800

ansancle
327 ● 9

What I have done with many components is grab the styles off the desktop and then add them to custom stylesheet for the ipad - so you get the same look on both. For whatever component you want to fix - use firebug or the like to grab the important values. To get the correct corresponding style entries on the Ipad, I use "Electric Mobile Studio" which provides full developer tools in a simulated Ipad environment. www.electricplum.com/studio.aspx

Using that tool you can see what style entries are used on the Ipad for the component and change them to match the desktop - they end up looking basically the same.

Here is some of my components CSS for Ipad - hope this helps.

1. .z-window-modal-cnt-noborder,
   .z-window-highlighted-cnt-noborder,
   .z-window-embedded-cnt-noborder,
   .z-window-overlapped-cnt-noborder,
   .z-window-popup-cnt-noborder  {
       border: 0 none;
       overflow: hidden;
       background : #FFFFFF; }
   
   
   .dhOverlappedWindow
   .z-window-overlapped-cnt,
   .z-window-overlapped-cnt-noborder, 
   .z-window-overlapped {  background:
   #66CCFF; }
   
        tr.z-grid-odd
   td.z-row-inner,tr.z-grid-odd
   .z-cell,tr.z-grid-odd {
       background:white;    }
   
   tr.z-row td.z-row-inner,tr.z-row
   .z-cell {   background:white;
       border-top:none;    border-left:1px
   solid white;    border-right:1px solid
   #FFFFFF;    border-bottom:1px solid #FFFFFF; }
   
   tr.z-grid-odd .z-cell {
       background-color: #FFFFFF;
       border-bottom: 1px solid #FFFFFF;
       border-left: 1px solid #FFFFFF;
       border-top: 1px solid #FFFFFF; }
   
   div.z-grid-body {   height: 100%
   !important;      }
   
   div.z-grid  {
   
       border: 0 solid #FFFFFF;
       overflow: hidden; }
   
   .dhGridWithImageSquares tr.z-row
   td.z-row-inner,tr.z-row .z-cell {
       background:white;   border-top: 0px
   solid #000000;  border-left:0px
   solid #000000;  border-right:0px
   solid #000000;  border-bottom:0px
   solid #000000; }
   
   
   
   .dhGridWithTopAndBottomLines
   tr.z-row td.z-row-inner,tr.z-row
   .z-cell {   background:white;
       border-top: 0px solid #000000;
       border-left:0px solid #000000;
       border-right:0px solid #000000;
       border-bottom:0px solid #000000; }
   
   
   
   .dhGridWithTopAndBottomLines
   tr.z-grid-odd td.z-row-inner,
   tr.z-grid-odd .z-cell, tr.z-grid-odd
   {   background-color: #F7F7F7; }
   .dhButton .z-button {
       background-color:#EFEFEF;   
       border-color:#CCCCCC;; }
   
   .dhButtonClicked .z-button:active {
       background-color:#86e2f9;
       border-color:#CCCCCC;; }
   
   .z-button {
       background-color:#EFEFEF;   
       border-color:#CCCCCC;; }
   
   
   .dhNoPaddingGroupbox .z-groupbox-cnt
   {   padding: 0px; }
   
   
   
   
   .dhNoPaddingGroupbox 
   .z-groupbox-3d-hl
   .z-groupbox-3d-header  {    padding:
   0px 0px; } .dhNoPaddingGroupbox 
   .z-groupbox-3d-cnt  {   padding: 0px;
   }
   
   
   .z-button {  
   background-image:-webkit-linear-gradient(top,
   #FEFEFE 0%, #EEEEEE 100%);   background-position:initial initial;
   background-repeat:initial initial;  
   border:1px solid #CCCCCC;  
   border-bottom-left-radius:3px;  
   border-bottom-right-radius:3px;  
   border-top-left-radius:3px;  
   border-top-right-radius:3px;  
   color:black;  
   font-family:'Helvetica Neue',
   Helvetica, Arial, 'Lucida Grande',
   sans-serif;   font-size:12px;  
   font-weight:normal;  
   line-height:20px;   margin:1px 1px 0
   0;   padding:5px 15px;  
   text-shadow: #FFFFFF 0 1px }
   
   .z-button:hover {  
   -webkit-box-shadow:none;   border-color:#CCCCCC;  
   box-shadow:none; } .z-button:focus {
   -webkit-box-shadow:none;   border-color:white;  
   box-shadow:none; }
   
   .z-button:active {  
   -webkit-box-shadow:none;   background-image:none;  
   background-position:initial initial;
   background-repeat:initial initial;  
   border-color:#CCCCCC;  
   background-color:#86e2f9;  
   box-shadow:none; }
   
   .z-button:disabled,
   .z-button:disabled:hover,
   .z-button:disabled:focus,
   .z-button:disabled:active {  
   -webkit-box-shadow:none;   background-image:-webkit-linear-gradient(top,
   #FEFEFE 0%, #EEEEEE 100%);   background-position:initial initial;
   background-repeat:initial initial;  
   border:1px solid #A6A6A6;  
   box-shadow:none;   color:gray;  
   opacity:0.6; }
   
   
   .dhTestButtonSelected {
       padding: 2px 2px;
       border: 1px solid #000000;
       border-radius: 1px;
       background: linear-gradient(top, rgba(46,46,46,1) 0%,rgba(3,3,3,1)
   100%);
       box-shadow: 0 1px 0 rgba(0,0,0,1), inset 0 0 1px
   rgba(255,255,255,0.6); }
   
   
   .z-splitter-hor-btn-l,
   .z-splitter-hor-btn-r  {    width:
   40px;   min-height: 40px;   height:
   50px;   left: -20px; }
   
   
   .dhButtonSelectedForIpad {
        -webkit-box-shadow:none;   background-image:none;  
   background-position:initial initial;
   background-repeat:initial initial;  
   border-color:#CCCCCC;  
   background-color:#86e2f9;  
   box-shadow:none;
       }
   
   
   .z-paging .z-paging-sep {
       background:no-repeat center center;
       border:0 none;  cursor:default;
       display:block;  font-size:1px;
       height:16px;    margin:0 2px;
       overflow:hidden;    width:4px;
       background-image:none }
   .z-paging-inp,.z-paging
   input.z-paging-inp {    border:1px
   solid #cfcfcf;  height:28px;
       line-height:28px;
       font-family:Georgia;
       font-size:14px;     color:#363636 }
   
   .z-paging .z-paging-next {
       background-image:url(./images/navigation/pagingbuttonright_20x20.png),  -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%) /* Chrome10+,Safari5.1+ */ } .z-paging
   .z-paging-prev {
       background-image:url(./images/navigation/pagingbuttonleft_20x20.png),   -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%) /* Chrome10+,Safari5.1+ */ } .z-paging
   .z-paging-last {
       background-image:url(./images/navigation/pagingbuttonrighttoend_20x20.png), -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%) /* Chrome10+,Safari5.1+ */ } .z-paging
   .z-paging-first {
       background-image:url(./images/navigation/pagingbuttonlefttoend_20x20.png),  -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%) /* Chrome10+,Safari5.1+ */ }
   .z-paging-btn-clk.z-paging-next {
       background-image:url(./images/navigation/pagingbuttonright_20x20.png),  -webkit-linear-gradient(top, #EEEEEE 0%, #FEFEFE 100%) /* Chrome10+,Safari5.1+ */ }
   
   /** The reason for this code is the
   mark inside the checkbox in the list
   row is not showing up on the Ipad
   **/
   
   .z-listitem-seld  .z-listcell-cnt
   .z-listitem-img-checkbox,
   .z-listgroup-seld .z-listcell-cnt
   .z-listgroup-img-checkbox,
   .z-listheader-img-seld.z-listheader-img
   {   background-image:
   url(./images/navigation/ok_24x24.png),
   -webkit-linear-gradient(top, #FEFEFE 0%, #EEE 100%) /*
   Chrome10+,Safari5.1+ */; }
   
   
   /** The reason for this code is the
   mark inside the checkbox is not
   showing up on the Ipad **/
   input[type=checkbox]:checked {
       background-image:
   url(./images/navigation/ok_24x24.png);
   } input[type=checkbox]:active {
       background-image:
   url(./images/navigation/ok_24x24.png);
   }
   input[type=checkbox]:checked:active
   {   background-image:
   url(./images/navigation/ok_24x24.png);
   }
   
   /** The reason for this being here
   is for some reason the bar was not
   showing up on the Ipad **/
   .z-separator-hor-bar  {
       background-image: url(./images/system/dot_1x1.png);
       background-position: left center;
       background-repeat: repeat-x; }
   
   
   
   .z-groupbox-3d {
       margin:0;overflow:hidden;padding:0
   } .z-groupbox-3d-header {
       background:transparent repeat-x 0
   0;      overflow:hidden;    border:1px
   solid #c5c5c5;  
       background: linear-gradient(to
   bottom, #FEFEFE 0%, #EEEEEE 100%);
   /* W3C */
       background: -webkit-linear-gradient(top,
   #FEFEFE 0%, #EEEEEE 100%); /* Chrome10+,Safari5.1+ */
       line-height:38px;
       font-family:Georgia;
       font-size:14px;     font-weight:bold;
       padding:4px 5px;    cursor:pointer;
       color:#555555;  text-shadow: 0 1px
   #FFFFFF; } .z-groupbox-3d-readonly {    cursor:default }
   
   .z-groupbox-3d-cnt {    border:1px
   solid #c5c5c5;  padding:5px }