minWidth for ButtonItem

[couimet]

Version: v9.1p_2014-07-23/Pro Deployment

We are currently working on translating our app.

We have many LinkItem or ButtonItem that have a fixed width. Those widths were based on English text and we explicitly used the "width" attribute for aesthetic.

Now, the 2nd language we want to use in the app has longer labels.

Candidly, we thought that we could switch the "width" attribute to "minWidth" and everything would be like we wanted:
we still respect the "minimal" aesthetic and, potentially, buttons/links grow wider to accomodate the longer languages.

Unfortunately, we just realized that there doesn't seem to be support for "minWidth" in ButtonItem or LinkItem.

We do not want to maintain a map of "language => width" for all our buttons and links for all the languages we'll support.

Do you have another suggestion that would leverage ISC's features ? Could FormItem.canvasProperties come to the rescue ?

Thanks !

-C

[Isomorphic]

ButtonItem is autoFit:true by default, which means that the width setting will already act as a minimum width.

If you aren't seeing this, you may have disabled autoFit for some reason, and should turn it back on.

[couimet]

Thanks for the answer.

Unfortunately, I still don't get the expected result.

I went to http://www.smartclient.com/#variousControls and replaced the script with this one:

isc.DynamicForm.create({
    fields : [
        { name : 'button1', width : 60, editorType : 'ButtonItem', title : 'Search' }, 
        { name : 'button2', width : 60, editorType : 'ButtonItem', title : 'OK' }, // Same width as "Search" : GOOD
        { name : 'button3', width : 60, editorType : 'ButtonItem', title : 'Search with long content 1' }, // Longer text does not make the button wider : WRONG
        { name : 'button4', width : 60, editorType : 'ButtonItem', title : 'Search with long content 2', autoFit : true }, // Explicit autoFit doesn't seem to help : WRONG
    ]
});

Based on the explanation you gave me , I was expecting buttons 3 and 4 to grow larger.

Am I missing something ?

Thanks !

-C

[couimet]

Hello,

I want to make sure you didn't miss my post.

Can you please confirm the test bed I provided is accurate.

I don't think the behaviour it shows reflect the explanation you provided.

Thanks !

-C

[Isomorphic]

Sorry for the confusion here.
This should give you the result you want:

isc.DynamicForm.create({
    fields : [
        { name : 'button1', width : 60, editorType : 'ButtonItem', buttonProperties:{overflow:"visible"}, title : 'Search' }, 
        { name : 'button2', width : 60, editorType : 'ButtonItem', buttonProperties:{overflow:"visible"}, title : 'OK' },
        { name : 'button3', width : 60, editorType : 'ButtonItem', buttonProperties:{overflow:"visible"}, title : 'Search with long content 1'}, 
        { name : 'button4', width : 60, editorType : 'ButtonItem', title : 'Search with long content 2', buttonProperties:{overflow:"visible"}}
    ]
});

Regards
Isomorphic Software

[couimet]

Thanks for the clarification.

I need to do the same with LinkItem.

I tried "linkProperties", but it didn't work. :-(

Do I have access to a similar mechanism for links ?

Thanks !

-C

[Isomorphic]

We're not sure what you mean by "do the same with LinkItem". LinkItem doesn't clip off values and the text input used by LinkItem for editing links doesn't support auto-sizing. So what are you trying to configure the LinkItem to do?

[couimet]

Here is how we use it:

isc.DynamicForm.create({
    fields : [
        { name : 'link1', width : 40, editorType : 'LinkItem', linkTitle : 'Advanced', showTitle : false, target : 'javascript', handleClick : function()  { alert("Hello"); } }
    ]
});

How can we get the same visual behaviour and make sure the linkTitle will not get truncated and have its end replaced with "..." ?

Thanks !

-C

[Isomorphic]

To avoid clipping here, you can set clipValue:false.

[couimet]

Thanks, that solved the issue !