MVC 3 - Generic Dropdown Control

[Administrator]

Hello All,


I am trying to create multi select DropDown list. When I am placing Syncfusion DropDown list inside the HTML Table, it's design is not coming properly. The down arrow key coming out of the Text but when I am placing same Syncfusion Dropdown list outside the HTML table than it's working perfectly fine. May I know what is the solution for it?

Please do let me know as earlty as possible as I am running out of time.



Images_7e05b994.rar

[Varalakshmi R.S]

Hi Alok,

Thanks for contacting syncfusion forums.

We have tested this issue by creating a simple sample with table and the control displays fine as expected. Could you please check the column width and dropdown control’s width? This issue might occur when the space is not enough to embed the dropdown control inside a column. If the issue exists still, could you please share us a simple sample to reproduce this issue so that we could analyse more on this and sort out the causes of this issue.

The sample can be downloaded from the following link,
GenericDropdown-1718552011.zip

Kindly try the sample and let us know the details.

Regards,
Varalakshmi

[Administrator]

Hi Varalakshmi,

I am sending you sample application. In this I have copied HTML code which are generated after rendering the page. Please find it with the attachment. You will find that arrow button is not coming properly.

After that please remove below code from the MvcResourceHandler.css file than it will work fine.
.GenericDropDownButtonBase
{
display: table-cell;
}

I also tried to apply custom css,but still it's not working.

Can you please tell me solution for it or provide me Custom Css for it.

Thanks
Alok Shah



WebApplication2_244a985b.rar

[Varalakshmi R.S]

Hi Alok,

Thanks for the update.

Since we are not able to run the sample, we have prepared a sample with custom styles for generic drop down and test this issue. And, the drop down displays fine as expected. Could you please refer the attached sample and modify the sample to reproduce this issue? so that we will analyse more on this and sort out the causes of this issue. The sample can be downloaded from the following link,
CustomCSS-2038935171.zip

Css class name should be specified in generic dropdown control tag for using custom css.

Kindly try the sample and let us know the details.

Regards,
Varalakshmi

[Administrator]

Hi Varalakshmi

I am getting following error when I tried to download attachment.
------------------------------------------------------------------
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
------------------------------------------------------------------

To run my sample application you have to run following link "http://localhost:portno/HTMLPage1.htm"

Please let me know if it's still not working. Please reply me ASAP because it's urgent.

Thanks
Alok Shah



Screenshots_76f77034.rar

[Varalakshmi R.S]

Hi Alok,

We are sorry for the inconvenience.

Kindly try the sample by downloading it from the following link,
CustomCSS-1240184712.zip

We will check your sample and update the other details.

Regards,
Varalakshmi

[Administrator]

Hi Varalakshmi,

Thanks for providing Custom CSS and it's working fine in FF, IE and Opera but it's not working in Safari. Can you please verify it?

Thanks
Alok Shah

[Administrator]

Hi Varalakshmi,

Thanks for providing Custom CSS and it's working fine in FF, IE and Opera but it's not working in Safari. Can you please verify it?

Please find image as an attachment.

Thanks
Alok Shah



Images_6009551e.rar

[Varalakshmi R.S]

Hi Alok,

We have checked the Custom css sample for dropdown in safari browser and it looks fine like in others browser. Since we are not able to run the sample attached by you, could you please share us the updated custom css working sample to check the issue in our end?
dropdown2087101054.zip

Kindly provide the requested details and we will check and update the issue details once the sample is shared.

Regards,
Varalakshmi R.S

[Administrator]

Hi Varalakshami,

In following post
http://www.syncfusion.com/support/forums/tools-mvc/101732/MVC-3---Generic-DropDownControl---Multiple-Checkbox-Select-and-Autocomplete


In my last reply I have attached one code, in which I have used custom css which is provided by you. Please check it.

In following css
.Syncfusion-GenericDropDown-Custom .GenericDropDownButtonBase
{
background-repeat: no-repeat;
color: #14428D;
background: url(../Content/Images/down_button_sprite.png);
height: 19px;
width: 15px;
vertical-align: middle;
display: table-cell;
}

if I will replace "display: table-cell;" to "display: block;" than down arrow will come perfect. Please check this post.

Thanks
Alok Shah

[Varalakshmi R.S]

Hi Alok,

Thanks for your patience.

This issue occurs only when the generic drop down is included inside a table. The control structure follows the table-cell manner that is textbox will be render in a column and button will be render in a next column. So when this control is embedded in a table, makes the button column to come down due to insufficient space. So, currently we recommend you to use the solution “display:block” for avoiding this issue when genric dropdown is used within a table.

Regards,
Varalakshmi

[Administrator]

Hi Varalakshmi,

I have tried solution (“display:block”) that is provided by you but it's have different effect in different browsers.

Please find different browser images as an attachment.

Thanks
Alok Shah




BrowserImages_655f08ce.rar

[Varalakshmi R.S]

Hi Alok,

We regret for the inconvenience.

We suggest you to use the following workaround to the browser compatibility issues when the GenericDropDown control is added inside table. Here, we have customized the margin-top styles based on the browser to avoid this issue.

The sample is available in the following link,
SyncfusionDDL_c0d4e867-681734365.zip

We have also attached output image in each browser for the GenericDropDown control.

Please try the sample and let us know if you would require further assistance.

Regards,
Varalakshmi R.S