0

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

asked 2013-04-16 20:02:26 +0800

fabuloso gravatar image fabuloso
3

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

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
0

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

ansancle gravatar image ansancle
317 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 }
    
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-04-16 20:02:26 +0800

Seen: 16 times

Last updated: Apr 18 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More