1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    39
    Vote Rating
    0
    Jacsoft is on a distinguished road

      0  

    Default Colorpicker size of frames

    Colorpicker size of frames


    Hello,

    I am working with a colorpicker and am editing it to my needs (language and the height and width, because they were not correct). But I can't get the width right. (see screenshot)

    I have translated it to Dutch so don't mind the text. I have edited (in the color-picker.ux.js):

    Code:
    //The main problem is in this function:
    cpCreateDomObjects: function() {
    .
    .
    .
            this.form = new Ext.FormPanel({
                frame:true,
                //width: 'auto',  //doesn't work!
                width: 273,       //this is too high, but when I change it, see screenshot 2 what happens:
    
    
    Ext.ux.ColorDialog = function( config ) {
    .
    .
    .
        this.setSize(573, 300 ); //the height is correct, the width should be less
    }
    In the css file in also can't find the correct settings:

    Code:
    .x-window-body {
        border:0 !important;
    }
    
    .x-cp-panel {
        width: 186px;
        height: 262px;
    }
    .x-cp-rgb-msk {
        background-image: url(mask.png);
        background-color: #FF0000;
        width: 256px;
        height: 256px;
        float: left;
        cursor: crosshair;
        _cursor: hand;
        _background-image:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mask.png',sizingMethod='scale');
    }
    .x-cp-rgb-picker {
        width: 5px;
        height: 5px;
        cursor: crosshair;
        _cursor: hand;
        background: url(picker.gif) transparent;
        background-repeat: no-repeat;
    }
    .x-cp-hue-picker {
        width: 5px;
        height: 5px;
        cursor: crosshair;
        _cursor: hand;
        background: url(picker.gif) transparent;
        background-repeat: no-repeat;
    }
    .x-cp-hue-msk {
        margin: 0px 0px 0px 3px;
        background-image: url(side_slider.jpg);
        background-color: #FF0000;
        width: 14px;
        height: 256px;
        float: left;
        cursor: crosshair;
        _cursor: hand;
    }
    .x-cp-control-container {
        float: left;
        margin: 0 0 0 3px;
        padding: 0;
        width: 170px;
    }
    .x-cp-color-container, .x-cp-coloro-container {
        margin: 5px 0;
        border: 1px solid gray;
        height: 16px;
        line-height: 16px;
        padding: 1px;
        font-size: 9px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        _cursor: hand;
    }
    .x-cp-coloro-container {
        cursor: default;
    }
    .x-cp-panel .x-form-item-label {
        font-size: 9px;
        width: 45px;
        float: left;
        margin: 5px 0;
    }
    .x-cp-rgb-container {
        font-size: 10px;
    }
    .x-cp-form .x-form-field, .x-cp-form .x-form-element {
        height: 12px;
        line-height: 10px;
        width: 40px;
        font-size: 10px;
        text-align: center;
        float: left;
        padding: 0;
    }
    .x-cp-clear {
        clear: both;
    }
    .x-cp-hexa-panel {
        height: 30px;
        float: left;
    }
    .x-cp-form .x-fieldset, .x-cp-form .x-form-item, .x-cp-form .x-fieldset  {
        margin: 0;
        padding: 0;
    }
    .x-cp-form .x-form-item-label {
        width: 30px;
        margin: 0 0 0 3px;
    }
    
    .x-cp-colors-container {
        margin: 5px 0;
        clear: both;
        height: auto;
    }
    Any help?
    Attached Images