Print Page - [SOLVED] The title attribute for Combobox is not working

Title: [SOLVED] The title attribute for Combobox is not working
Post by: hmdat on April 17, 2018, 06:55:30 AM

I have one combobox with the label at the left side, but it's obscured a part.
(https://i.stack.imgur.com/JHCqW.png)
And I want when the mouse is on the label, it show full text. So, I tried set the 'title' attribute, but it's not working.

Code:

Code:

<select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" title="Organizaiton Name" style="width: 90%;height: 22px" data-options="label:' Organizaiton Name ',panelHeight:'auto',panelMaxHeight:'200',required:false,editable: false"/>

How can I fix this ?

Thanks.

Title: Re: The title attribute for Combobox is not working
Post by: jarry on April 17, 2018, 06:26:52 PM

You can set the 'labelWidth' property to a bigger value.

Code:

label: 'Organizaiton Name:',
labelWidth: 150

Title: Re: The title attribute for Combobox is not working
Post by: hmdat on April 17, 2018, 08:39:20 PM

Dear Jarry,
Many thanks for your reply, but beside this solution, if it is possible to make the title attribute work, or the combobox plugin didn't support this ?

Title: Re: The title attribute for Combobox is not working
Post by: jarry on April 18, 2018, 02:00:27 AM

You can also call 'label' method to get the label object and then set the 'title' attribute for it.

Code:

var label = $('#conditionForm_orgName').combobox('label');
label.attr('title', 'Organizaiton Name');

Title: Re: The title attribute for Combobox is not working
Post by: hmdat on April 18, 2018, 05:30:52 AM

Dear Jarry,
Actually before ask this question, I have tried search, and also found an your answer for change label for textbox follow link:
https://www.jeasyui.com/forum/index.php?topic=6843.0

Your code works for textbox, but for combobox:
If I tried put this javascript segment in

Code:

$(document).ready(function(){ .......});

, it doesn't work.

If I put code in onBeforeLoad event of combobox, it works:

Code:

<select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" style="width: 90%;height: 22px" data-options="label:' Organizaiton Name ', panelHeight:'auto', panelMaxHeight:'200', required:false, editable: false, onBeforeLoad:function(){.....<java script code to change label>......}"/>

Generally, this solution also good, but I wonder if any better solution, like we can extend the 'title' attribute for combobox and re-write for it, but I'm not sure how to do ?

Title: Re: The title attribute for Combobox is not working
Post by: jarry on April 19, 2018, 05:03:33 PM

The example works fine on combobox components.

http://code.reloado.com/ukiwoj4/edit#html,live

Another way to attach the 'title' attribute is to wrap the 'label' with a '<span>' element.

Code:

    <select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" style="width: 200px;height: 22px" data-options="label:'<span title=\'Organizaiton Name\'>Organizaiton Name</span> ',panelHeight:'auto',panelMaxHeight:'200',required:false,editable: false"/>

Title: Re: The title attribute for Combobox is not working
Post by: hmdat on April 19, 2018, 07:02:16 PM

Hi Jarry,
I have known the reason why it didn't work.
My combox was in one iframe, I tried changed put

Code:

var label = $('#conditionForm_orgName').combobox('label');
label.attr('title', 'Organizaiton Name');

Code:

$(window).load(function(e) {....}

and it works.

Also your solution with using the <span> is very DELICATE and PERFECT, that is what I need.

Thank you billion times, Jarry!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: hmdat on April 17, 2018, 06:55:30 AM