For some reason, there is extra space added in front of my element after making it in to a dhtmlXCombo object using the following code:
var report_countryNewComboObj = "dhtmlxCombo__frm_fsmReportCountry_" + reportref_newID;
window[report_countryNewComboObj] = dhtmlXComboFromSelect("frm_reportref_reportcountry_" + reportref_newID);
window[report_countryNewComboObj].enableFilteringMode(true);
window[report_countryNewComboObj].loadXML("./data/xmlparse__countries_all.php?maxlen=15&output=image");
Note that the is automatically added to the DOM using a function.
I have attached my code in this thread so that you can review it.
It works well in both Chrome and Firefox, as you can see in the attachments below.
What can I do to solve this issue? If this cannot be solved I will be forced to skip dhtmlXCombo for this specific view, and I really would like to use it instead of creating my own combo.
Thank you in advance!
dhtmlxcombo bug110123.rar (3.19 KB)
Could you provide a complete sample that contains all necessary libraries and ready for testing
Hello Alexandra,
Please go to address: nordfolkproject.net/atlas_cms/temp/demo.html
Note that you will receive some 404 errors from XmlHttpRequests, since I have only made a simplified HTML version of the real CMS platform output. There are also some images which will not function properly but I have tested it in IE, Firefox and Opera and it resembles the same “missfunctionality” that I get in the real environment.
To see my problem:
- Scroll down to “Service reports” -> “Report references”.
- Put in either a 10 or 12 character long string in the “Report number” field,
Choose a country from the dhtmlxCombo, Put in a number value 0-99999 in “Report hours”
and put in a date in this format: 2011-01-01 in the “Date reported” field.
Then press the “+” icon to insert a new to the DOM and you will see the problem with the extra space which gets added in front of the created (dhtmlxCombo object).
Additional info:
The function to alter the DOM (to add new
) is named “priv__AddReportRef()” and is located in this file: nordfolkproject.net/atlas_cm … nstruct.js
Thank you in advance!
Hello,
try to add the “tr” element into the tbody (not into the table). The table structure is:
[code]
|
Report number |
Reported from country |
Report hours |
Date reported |
|
|
…
…
[/code]
Try also set layout “fixed” for the table
Alexandra,
Your ideas did not solve it for me.
<div id="fsm_addissue_reportref" class="FSM_addissue_findcontainer FSM_addissue FSM_addissue_findcontainer_reportref">
<table id="fsm_addissue_reportrefC" border="0" cellspacing="0" cellpadding="0" width="490" style="position: fixed;">
<tbody>
<tr>
<td class="CMS_text__tiny" width="20"></td>
<td class="CMS_text__tiny" width="110">Report number</td>
<td class="CMS_text__tiny" width="155">Reported from country</td>
<td class="CMS_text__tiny" width="85">Report hours</td>
<td class="CMS_text__tiny" width="80">Date reported</td>
<td class="CMS_text__tiny" width="20"></td>
<td class="CMS_text__tiny" width="20"></td>
</tr>
<tr id="fsm_addissue_reportref_reportcontainer_0">
<td width="20"><img id="frm_reportref_typeico_0" alt="" border="0" width="14" height="14" src="./img/transpixel.gif" /></td>
<td width="110"><input id="frm_reportref_reportno_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reportno[]" value="Report number" style="width:100px;" maxlength="12" onfocus="if(this.value == 'Report number') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Report number'; } priv__AddReportRef_getReportData('0');" onchange="priv__formChanged();" /></td>
<td width="155">
<select id="frm_reportref_reportcountry_0" opt_type="image" class="CMS__frminput-selectfield" name="frm_reportref_reportcountry_0" style="width: 145px;">
<!-- opt_type="image" -->
</select>
</td>
<td width="85"><input id="frm_reportref_reporthours_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reporthours[]" value="Report hours" maxlength="5" style="width:70px;" onfocus="if(this.value == 'Report hours') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Report hours'; }" onchange="priv__formChanged();" /></td>
<td width="80"><input id="frm_reportref_reportdate_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reportdate[]" value="Report date" maxlength="10" style="width:65px;" autocomplete="off" onfocus="if(this.value == 'Report date') { this.value = ''; } priv__formChanged();" onblur="if(this.value == '') { this.value = 'Report date'; } priv__formChanged();" onchange="priv__formChanged();" /></td>
<td width="20" align="right" valign="middle"><img id="frm_reportref_remlink_0" alt="-" border="0" width="14" height="14" src="./style/skins/<?php echo $_SESSION['CMSSESSDATA']['USERSESS']['CMS_skinID']; ?>/img/ico14x14_remove.png" onmouseover="Tip('Remove this report reference.');" onmouseout="UnTip();" style="cursor:pointer" onclick="priv__RemReportRef('0');" /></td>
<td width="20" align="right" valign="middle"><img id="frm_reportref_addlink" alt="+" border="0" width="14" height="14" src="./style/skins/<?php echo $_SESSION['CMSSESSDATA']['USERSESS']['CMS_skinID']; ?>/img/ico14x14_add.png" onmouseover="Tip('Add another report reference...');" onmouseout="UnTip();" style="cursor:pointer" onclick="priv__AddReportRef('0');" /></td>
</tr>
</tbody>
</table>
</div>
As you can see I have implemented both position:fixed and
but still your combo breaks the layout by adding that extra space infront of it.
Any other suggestions?
Thank you in advance!
Try to set table layout, not position:
style=“table-layout:fixed”
Still not working Alexandra. Have you made this work using my code on the demo page above or are these just guesses?
<div id="fsm_addissue_reportref" class="FSM_addissue_findcontainer FSM_addissue FSM_addissue_findcontainer_reportref">
<table id="fsm_addissue_reportrefC" border="0" cellspacing="0" cellpadding="0" width="490" style="table-layout:fixed">
<tbody>
<tr>
<td class="CMS_text__tiny" width="20"></td>
<td class="CMS_text__tiny" width="110">Report number</td>
<td class="CMS_text__tiny" width="155">Reported from country</td>
<td class="CMS_text__tiny" width="85">Report hours</td>
<td class="CMS_text__tiny" width="80">Date reported</td>
<td class="CMS_text__tiny" width="20"></td>
<td class="CMS_text__tiny" width="20"></td>
</tr>
<tr id="fsm_addissue_reportref_reportcontainer_0">
<td width="20"><img id="frm_reportref_typeico_0" alt="" border="0" width="14" height="14" src="./img/transpixel.gif" /></td>
<td width="110"><input id="frm_reportref_reportno_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reportno[]" value="Report number" style="width:100px;" maxlength="12" onfocus="if(this.value == 'Report number') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Report number'; } priv__AddReportRef_getReportData('0');" onchange="priv__formChanged();" /></td>
<td width="155">
<select id="frm_reportref_reportcountry_0" opt_type="image" class="CMS__frminput-selectfield" name="frm_reportref_reportcountry_0" style="width: 145px;">
</select>
</td>
<td width="85"><input id="frm_reportref_reporthours_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reporthours[]" value="Report hours" maxlength="5" style="width:70px;" onfocus="if(this.value == 'Report hours') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Report hours'; }" onchange="priv__formChanged();" /></td>
<td width="80"><input id="frm_reportref_reportdate_0" class="CMS__frminput-inputfield" type="text" name="frm_reportref_reportdate[]" value="Report date" maxlength="10" style="width:65px;" autocomplete="off" onfocus="if(this.value == 'Report date') { this.value = ''; } priv__formChanged();" onblur="if(this.value == '') { this.value = 'Report date'; } priv__formChanged();" onchange="priv__formChanged();" /></td>
<td width="20" align="right" valign="middle"><img id="frm_reportref_remlink_0" alt="-" border="0" width="14" height="14" src="./style/skins/<?php echo $_SESSION['CMSSESSDATA']['USERSESS']['CMS_skinID']; ?>/img/ico14x14_remove.png" onmouseover="Tip('Remove this report reference.');" onmouseout="UnTip();" style="cursor:pointer" onclick="priv__RemReportRef('0');" /></td>
<td width="20" align="right" valign="middle"><img id="frm_reportref_addlink" alt="+" border="0" width="14" height="14" src="./style/skins/<?php echo $_SESSION['CMSSESSDATA']['USERSESS']['CMS_skinID']; ?>/img/ico14x14_add.png" onmouseover="Tip('Add another report reference...');" onmouseout="UnTip();" style="cursor:pointer" onclick="priv__AddReportRef('0');" /></td>
</tr>
</tbody>
</table>
</div>
Any other suggestions?
You have not solved the problem with table structure that I have described before.
One more possible solution is valign=“top” in td element:
|