Change imagebutton width...

Discontinued products DHTMLX Touch
#1

I’m basically trying to have an image button look and behave like a regular button but with an icon. I have figured out how to change all of the imagebutton’s attributes and appearance except for its width. By default, the regular button fills it’s container, but the image button does not. I have tried all kinds of modifications to the css and js. The context of my change is in relation to the confimation box…I want both the cancel and ok buttons side-by-side. While I have this working, both buttons do not fill their container (screenshot).

Making changes to the css .dhx_el_imagebutton span{} works for everything but the width. I’ve also played with the template tag for the image button without any luck.

touchui.css:

background: rgb(186,186,186); background: -moz-linear-gradient(top, rgba(186,186,186,1) 0%, rgba(121,121,121,1) 50%, rgba(22,22,22,1) 51%, rgba(19,19,19,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(186,186,186,1)), color-stop(50%,rgba(121,121,121,1)), color-stop(51%,rgba(22,22,22,1)), color-stop(100%,rgba(19,19,19,1))); background: -webkit-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(121,121,121,1) 50%,rgba(22,22,22,1) 51%,rgba(19,19,19,1) 100%); background: -o-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(121,121,121,1) 50%,rgba(22,22,22,1) 51%,rgba(19,19,19,1) 100%); background: -ms-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(121,121,121,1) 50%,rgba(22,22,22,1) 51%,rgba(19,19,19,1) 100%); background: linear-gradient(to bottom, rgba(186,186,186,1) 0%,rgba(121,121,121,1) 50%,rgba(22,22,22,1) 51%,rgba(19,19,19,1) 100%); border: 1px solid #444; border-radius: 8px;-webkit-border-radius:8px; -moz-border-radius:8px; //margin:5px; padding: 10px; padding-right: 15px; text-shadow: 2px 2px 1px #000; line-height: 42px; font-size: 20px; color: #fff; }

touchui.js:

{template:"<span><img src='#src#'/> #label#</span>",label:""}

Any help would be greatly appreciated.

#2

I have been working on the same issue. I’ve been using imagebuttons:

{cols:[
{view:'imagebutton', label:'Delete', src:getIcon('delete'),	click:doDelete, align:'right', css:'buttonImage_120'},
{view:'imagebutton', label:'Save', src:getIcon('floppy_disk'),click:doSave,  align:'left', css:'buttonImage_120'}
]},

By using “width:” in the css it is possible to set the buttons to a fixed width. See last line of code:

.buttonImage_120 span {

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
        background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
        
        background-color:#f9f9f9;
        
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
        
        xborder:1px solid #dcdcdc;
     
        display:inline-block;
        color:#666666;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:0px 10px 0px 10px;
        text-decoration:none;
        width:120px;
}

And then to make it fill the whole region, set the width to a percentage as:

.buttonImage_fill span {

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
        background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
        background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
        
        background-color:#f9f9f9;
        
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
        
        xborder:1px solid #dcdcdc;
     
        display:inline-block;
        color:#666666;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:0px 10px 0px 10px;
        text-decoration:none;
        width:80%;
}
#3

Also I just realized that I redefine one of the dhtmlx’s classes:

.dhx_el_imagebutton span {
	font-family: "Helvetica World", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #6d6d6d;
	margin: 5px;
	text-shadow: none;
	position:relative;
	top: -3px;
}

You may need similar adjustments…

#4

Thank you. I will try your suggestion and report back.

#5

It worked fine. Thank you for the solution!