Dropdowns are not displaying as select elements

Welcome Guest! To enable all features please Login or Register

vcsharp
88.4% (Honored)
YAF Commander Topic Starter

6 years ago

I am finding that dropdowns in YAF have a select element rendered with a display="none" and some other element shows as UI for these dropdowns. May be I need to disable some jquery plugin.

How can I restore the select element for all dropdowns, so its display is not set to none?

An example is the country dropdown in controls/editUserProfile.ascx.

Wanna join the discussion?! Login to your YAF.NET Support Forum forum account or Register a new forum account

Sponsor

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.0 rc 2

6 years ago

I am finding that dropdowns in YAF have a select element rendered with a display="none" and some other element shows as UI for these dropdowns. May be I need to disable some jquery plugin.

How can I restore the select element for all dropdowns, so its display is not set to none?

An example is the country dropdown in controls/editUserProfile.ascx.

Originally Posted by: vcsharp

you could remove the css class from these drop downs ore remove the js code that converts the drop downs


   jQuery(".standardSelectMenu").selectmenu({
        change: function() {
            if (typeof (jQuery(this).attr('onchange')) !== 'undefined') {
                __doPostBack(jQuery(this).attr('name'), '');
            }
        }
    });

    jQuery(".standardSelect2Menu").select2({
        width: '350px'
    });

the code need to be remove from the ../Scripts/yaf.js

PS: why do you want to use the regular drop downs? For example the country dropdown shows the Country flag next to the country name.

vcsharp
88.4% (Honored)
YAF Commander Topic Starter

6 years ago

I have Telerik website that uses FormDecorator to style various html elements. Right, now select element style is being overridden by jquery logic for drop downs. I would prefer the Tekerik theme for select elements to keep appearance consistent.

Is jquery-ui script also being loaded somewhere?

vcsharp
88.4% (Honored)
YAF Commander Topic Starter

6 years ago

I am finding that dropdowns in YAF have a select element rendered with a display="none" and some other element shows as UI for these dropdowns. May be I need to disable some jquery plugin.

How can I restore the select element for all dropdowns, so its display is not set to none?

An example is the country dropdown in controls/editUserProfile.ascx.

Originally Posted by: tha_watcha

you could remove the css class from these drop downs ore remove the js code that converts the drop downs


   jQuery(".standardSelectMenu").selectmenu({
        change: function() {
            if (typeof (jQuery(this).attr('onchange')) !== 'undefined') {
                __doPostBack(jQuery(this).attr('name'), '');
            }
        }
    });

    jQuery(".standardSelect2Menu").select2({
        width: '350px'
    });

the code need to be remove from the ../Scripts/yaf.js

PS: why do you want to use the regular drop downs? For example the country dropdown shows the Country flag next to the country name.

Originally Posted by: vcsharp

I went to the file jquery.ForumExtensions.min.js and deleted the following code. This does remove all special styled select elements except the Country drop down on EditUserProfile page. Any idea why Country drop down is not changing to normal select?


jQuery(".standardSelectMenu").selectmenu({change:function(){typeof jQuery(this).attr("onchange")!="undefined"&&__doPostBack(jQuery(this).attr("name"),"")}});jQuery(".standardSelect2Menu").select2({width:"350px"});

Edited by user 6 years ago | Reason: Not specified

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.0 rc 2

6 years ago

Because its not a regular dropdown its a custom imagelistbox. Try to modify the ..controls\EditUserControl.ascx and remove the CssClass from the control

<YAF:ImageListBox ID="Country" AutoPostBack="true" OnTextChanged="LookForNewRegions" runat="server" CssClass="selectMenuWithIcons" />

vcsharp
88.4% (Honored)
YAF Commander Topic Starter

6 years ago

I removed the css class, so now the country dropdown looks like following. Still it does not look like default select element. May be there is something in the custom control of ImageList that is causing this.


<YAF:ImageListBox ID="Country" AutoPostBack="true" OnTextChanged="LookForNewRegions" runat="server"  />

I think the following server-side code in EditUserProfile.ascx.cs is causing some JavaScript to be emitted that could be the reason for Country drop down not becoming a regular select.


   /// <summary>
        /// Raises the <see cref="E:System.Web.UI.Control.PreRender" /> event.
        /// </summary>
        /// <param name="e">An <see cref="T:System.EventArgs" /> object that contains the event data.</param>
        protected override void OnPreRender([NotNull] EventArgs e)
        {
            // setup jQuery and DatePicker JS...
            if (this.GetText("COMMON", "CAL_JQ_CULTURE").IsSet())
            {
                this.PageContext.PageElements.RegisterJQueryUILanguageFile(this.CurrentCultureInfo);
            }

            this.PageContext.PageElements.RegisterJsBlockStartup(
                "DatePickerJs",
                JavaScriptBlocks.DatePickerLoadJs(
                    this.Birthday.ClientID,
                    this.GetText("COMMON", "CAL_JQ_CULTURE_DFORMAT"),
                    this.GetText("COMMON", "CAL_JQ_CULTURE")));

            this.PageContext.PageElements.RegisterJsBlockStartup(
                "dropDownJs",
                JavaScriptBlocks.SelectMenuWithIconsJs(this.Country.ClientID));

            base.OnPreRender(e);
        }

Edited by user 6 years ago | Reason: Not specified

vcsharp
88.4% (Honored)
YAF Commander Topic Starter

6 years ago

I had to make 2 changes in code-behind of EditUserProfile.cs to revert Country drop down to a simple select element.

[list]

Comment the line of code in Page_PreRender as below.[/list]


this.PageContext.PageElements.RegisterJsBlockStartup(
              "dropDownJs",
                JavaScriptBlocks.SelectMenuWithIconsJs(this.Country.ClientID));

[list]

Comment the line of code in BindData method as below, so no images are visible.[/list]


this.Country.ImageLocation = YafForumInfo.GetURLToContent("images/flags/{0}.png");

Edited by user 6 years ago | Reason: Not specified

Important Information: