locked
I want to change the JQuery dropdownlist to be non transparent RRS feed

  • Question

  • User-786564416 posted

    I have editable dropdownlist control, BelongingAdminUnitDDL. The form is a content page. Its master page has a footer "Website is powered by …". when the drop down list is clicked, it shows the items list. The items list shown become transparent when it is on front of the master page footer.

    Plus this, I want to write a custom Arabic message instead of "No results match". The font shown is non changeable even I increase it. I want to make it consistent with the font on the other controls. If it is not possible to change its font, I want to make the other textbox controls fonts (PersonalNameTxtBox, UserNameTxtBox,EmailTxtBox, MobileTxtBox, TitleTxtBox) identical as the BelongingAdminUnitDDL control.

    Please help with thanks,

    <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/MyMasterPage.master" AutoEventWireup="false" CodeFile="NewUser.aspx.vb" Inherits="UserInformation_NewUser" ClientIDMode="Static"  MaintainScrollPositionOnPostback="true" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <style type="text/css">
                           
             .MainFieldsDivStyle
            {
                border-color: Black;
                width: 70%;
                border-style: solid;
                margin-top: 22px;
                background-color:#C9DCF2;
                opacity: 0.8;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }     
            
                   
            .ErrorMessage
            {
                color: red;
                text-align: right;
                font-family: sc_AMEEN;
                font-style: normal;
                font-size: 28px;
                margin-left: 21px;
            }
           
            
            .CellStyle
            {
                border: 1px solid Black;
                background-color:#A1C1E6; 
                width:20%;
                text-align: right;
            }
    
    
    
            
           .UpperMargin
           {
               margin-top:0px; 
               margin-right:0px;
           }     
           
            
            .Buttonout
            {
                cursor:default;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            } 
              
            .Buttonhover
            {
                cursor:pointer;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            } 
    
    	    #overlay 
            {
                ;
                z-index: 99;
                top: 0px;
                left: 0px;
                background-color: #f8f8f8;
                width: 100%;
                height: 100%;
                filter: Alpha(Opacity=90);
                opacity: 0.9;
                -moz-opacity: 0.9;
            }     
                   
            #theprogress 
            {
                background-color: #fff;
                border:1px none #ccc;
                padding:10px;
                width: 300px;
                height: 30px;
                line-height:30px;
                text-align: center;
                filter: Alpha(Opacity=100);
                opacity: 1;
                -moz-opacity: 1;
            }
    
            #modalprogress 
            {
                ;
                top: 40%;
                left: 50%;
                margin: -11px 0 0 -150px;
                color: #990000;
                font-weight:bold;
                font-size:28px;
                font-family:SC_AMEEN;  
            }
    
                   
            
            .auto-style1 {
                height: 47px;
            }
            .auto-style2 {
                border: 1px solid Black;
                background-color: #A1C1E6;
                width: 20%;
                text-align: right;
                height: 47px;
            }
    
           /*.chosen-container .chosen-drop 
                {
                    border-bottom: 0;
                    border-top: 1px solid #aaa;
                    top: auto;
                    bottom: 40px;
                    text-align:right;  
                }*/
     
           
     
            .auto-style3 {
                color: red;
                text-align: right;
                font-family: sc_AMEEN;
                font-style: normal;
                font-size: 28px;
                margin-left: 21px;
                margin-top: 6px;
            }
     
           
     
        </style>
    
        <link rel="stylesheet" href="<%= ResolveUrl("~/jquery/js/chosen.css")%>" />
        <link rel="stylesheet" href="<%= ResolveUrl("~/jquery/js/bootstrap.min.css")%>"/>
    
            
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server">
    
        <%--<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>--%>
    
        <asp:toolkitscriptmanager ID="ScriptManager1" runat="server" />
    
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    	<ContentTemplate>
            <div id="MainFields"  runat="server" class="MainFieldsDivStyle" >
    
                <table id="NewUserTable" runat="server" width="100%">
    
                    <tr align="center" style="height:63px;">
                        <td colspan="5" style="border:black solid 1px"   >
                            <asp:Label ID="Label2" runat="server" Text="مستخدم جديد" style="font-family: sc_AMEEN; font-size: 36px"></asp:Label>
                        </td>
                    </tr>
    
                    <tr>
                        <td width="7.5%" align="right">
                            <asp:CustomValidator ID="PersonalNameDistinctionValidator" runat="server" Display="Dynamic" ErrorMessage="إسم المستخدم الذي أدخلته موجود سابقا" style="font-size: 28px; ">*</asp:CustomValidator>
                            <asp:CustomValidator ID="PersonalNameLengthValidator" runat="server" Display="Dynamic" ErrorMessage="طول الاسم الشخصي يجب أن لا يقل عن 10 أحرف" style="font-size: 28px; ">*</asp:CustomValidator>
                            <asp:RequiredFieldValidator ID="PersonalNameRequiredValidator" runat="server" ControlToValidate="PersonalNameTxtBox" Display="Dynamic" ErrorMessage="لم تقم بإدخال الإسم الشخصي للمستخدم" SetFocusOnError="True" style="font-size: 28px; ">*</asp:RequiredFieldValidator>
                        </td>
                        <td width="65%" align="right" colspan="2">
                            <asp:TextBox ID="PersonalNameTxtBox" runat="server" Height="35px" style="font-family: 'SAkkal Majalla'; font-size: 24px; text-align: right; border-style:solid; border-color:Black;
                            -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Width="530px"></asp:TextBox>
                        </td>
                        <td align="right" class="CellStyle">
                            <asp:Label ID="PersonalNameLabel" runat="server" Text="الاسم" 
                            BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                            style="font-size: 24px; font-family: 'Sakkal Majalla'; text-align: right;" 
                            BorderColor="Black" Width="150px"></asp:Label>
                        </td>
                        <td width="7.5%"></td>
                    </tr>
    
                    <tr>
                        <td align="right">
                            <%--<asp:CustomValidator ID="UserNameLengthValidator" runat="server" ControlToValidate="UserNameTxtBox" Display="Dynamic" ErrorMessage="طول اسم المستخدم يجب أن لا يقل عن 8 أحرف" style="font-size: 28px; ">*</asp:CustomValidator>--%>
                            <%--<asp:CustomValidator ID="UserNameCustomeValidator" runat="server" ControlToValidate="UserNameTxtBox" Display="Dynamic" ErrorMessage="إسم المستخدم الشخصي الذي أدخلته موجود سابقا" style="font-size: 28px; ">*</asp:CustomValidator>--%>
                            <%--<asp:RequiredFieldValidator ID="UserNameReqValidator" runat="server" ControlToValidate="UserNameTxtBox" Display="Dynamic" ErrorMessage="لم تقم بإدخال إسم المستخدم" SetFocusOnError="True" style="font-size: 28px; ">*</asp:RequiredFieldValidator>--%>
                        </td>
                        <td align="right" colspan="2">
                            <asp:TextBox ID="UserNameTxtBox" runat="server" Height="35px" style="font-family: calibri; font-size: 22px; text-align: left;  border-style:solid; border-color:Black;
                            -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Width="530px" ReadOnly="True"></asp:TextBox>
                        </td>
                        <td class="CellStyle">
                            <asp:Label ID="UserNameLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 24px; font-family: 'Sakkal Majalla'; text-align: right; margin-left: 0px;" Text="إسم المستخدم" Width="150px"></asp:Label>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right">
                            <asp:CustomValidator ID="EmailCustomValidator" runat="server" ControlToValidate="EmailTxtBox" Display="Dynamic" ErrorMessage="البريد الالكتورني الذي أدخلته موجود سابقا" style="font-size: 28px; ">*</asp:CustomValidator>
                            <asp:RegularExpressionValidator ID="EmailRegularExpression" runat="server" ControlToValidate="EmailTxtBox" Display="Dynamic" ErrorMessage="البريد الالكتروني الذي أدخلته غير صحيح" style="font-size: 28px; " ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
                            <asp:RequiredFieldValidator ID="EmailReqValdt" runat="server" ControlToValidate="EmailTxtBox" Display="Dynamic" ErrorMessage="لم تقم بإدخال البريد الالكتروني" SetFocusOnError="True" style="font-size: 28px; ">*</asp:RequiredFieldValidator>
                        </td>
                        <td style="direction: ltr" align="right" colspan="2">
                            <asp:TextBox ID="EmailTxtBox" runat="server" Height="35px" style="font-family: calibri; font-size: 22px; text-align: left;  border-style:solid; border-color:Black;
                        -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" TextMode="Email" Width="530px" ReadOnly="True"></asp:TextBox>
                        </td>
                        <td style="text-align: right" class="CellStyle">
                            <asp:Label ID="EmailLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 24px; font-family: 'Sakkal Majalla'; text-align: right;" Text="البريد الالكتروني" Width="150px"></asp:Label>
                        </td>
                        <td></td>
                    </tr>
    
                    <tr>
                        <td align="right">
                            <asp:RegularExpressionValidator ID="MobileExpressionValidator" runat="server" ControlToValidate="MobileTxtBox" Display="Dynamic" ErrorMessage="رقم النقال غير صحيح. يجب أن يكون 8 أرقام" style="font-size: 28px" ValidationExpression="^[0-9]{8}$">*</asp:RegularExpressionValidator>
                        </td>
                        <td colspan="2" align="right">
                            <asp:TextBox ID="MobileTxtBox" runat="server" Height="35px" MaxLength="13" style="border-style:solid;border-color:black; font-family: calibri; font-size: 20px;
                        -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px; text-align: left;" TextMode="Phone" Width="530px"></asp:TextBox>
                        </td>
                        <td style="text-align: right" class="CellStyle">
                            <asp:Label ID="PhoneLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 24px; font-family: 'Sakkal Majalla'; text-align: right;
                        -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="رقم النقال" Width="150px"></asp:Label>
                        </td>
                        <td></td>
                    </tr>
    
                    <tr>
                        <td align="right">
                            <asp:RequiredFieldValidator ID="JobTitleReqValdat" runat="server" ControlToValidate="TitleTxtBox" Display="Dynamic" ErrorMessage="لم تقم بإدخال المسمى الوظيفي" SetFocusOnError="True" style="font-size: 28px; ">*</asp:RequiredFieldValidator>
                        </td>
                        <td colspan="2" align="right">
                            <asp:TextBox ID="TitleTxtBox" runat="server" Height="35px" style="font-family: 'sakkal Majalla'; font-size: 24px; text-align: right;  border-style:solid; border-color:Black;
                            -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Width="530px"></asp:TextBox>
                        </td>
                        <td style="text-align: right" class="CellStyle">
                            <asp:Label ID="JobTitleLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 24px;   font-family: 'Sakkal Majalla'; text-align: right;" Text="المسمى الوظيفي" Width="150px"></asp:Label>
                        </td>
                        <td></td>
                    </tr>
    
                    <tr> 
                        <td class="auto-style1" align="right">
                            <asp:CustomValidator ID="BelongingUnitCustValidator" runat="server" ControlToValidate="BelongingAdminUnitDDL" Display="Dynamic" ErrorMessage="لم تقم باختيار الوحدة الإدارية التي تنتمي لها" style="font-size: 28px; ">*</asp:CustomValidator>
                        </td>
                        <td align="right" colspan="2">
                            <asp:DropDownList ID="BelongingAdminUnitDDL" class="chzn-select" runat="server" AppendDataBoundItems="true"  DataSourceID="SDS1" DataTextField="Name" DataValueField="Indx" 
                                onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" 
                                style="border: 1px solid Black; font-family: 'sakkal Majalla'; text-align:right;font-size: 30px; 
                                -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" Width="535px" >
                            </asp:DropDownList>
                        </td>
                        <td style="text-align: right" class="auto-style2">
                            <asp:Label ID="BelongingUnitLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 24px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Text="الوحدة الإدارية" Width="150px"></asp:Label>
                        </td>
                        <td class="auto-style1"></td>
                    </tr>
    
    
                    
    
                </table> 
    
    
                <table width="100%">
    
                    <tr>
                        <td width="5%"></td>
                        <td width="7%" style="text-align: left">
                            <asp:ImageButton ID="CloseThisPage" runat="server" CausesValidation="False" Height="40px" ImageUrl="~/Images/CloseThisPage.png" Width="50px" style="margin-top: 5px" />
                        </td>
                        <td width="88%" style="text-align: left">
                            <asp:Button ID="CreateTheNewAccount" runat="server" BackColor="#6262FF"  
                            ForeColor="White" Height="45px" 
                            style="text-align: center; font-size: 32px;  font-family: sc_AMEEN; margin-left: 225px;margin-bottom:5px; 
                            -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                            Text="أرسـل" Width="200px"
                            onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" />
                        </td>
                        <td width="5%"></td>
                    </tr>
                    
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                            CssClass="ErrorMessage" DisplayMode="List" 
                            Height="190px" Width="700px" />
                        </td>
                        <td></td>
                    </tr>
                </table>
    
    
            </div> 
                    
    
        </ContentTemplate>     
        </asp:UpdatePanel>
                    
            
        <div id="ExtraItems"  runat="server" visible="false">
            <table id="TmpTable" runat="server">   
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS1" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT DISTINCT [Indx], [Name] FROM [AdministrationUnits] ORDER BY [Name], [Indx]">
                            
                        </asp:SqlDataSource>
                    </td> 
                </tr>
    
                
            </table>
            
         </div>     
        
        <!-- Required jQuery Reference -->
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/jquery-1.8.2.min.js")%>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/chosen.jquery.min.js")%>"></script>
    
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/jquery-3.3.1.js")%>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/chosen.jquery.js")%>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/bootstrap.min.js")%>"></script>
    
            
        
      
    
        <script type="text/javascript">
            $(function () {
                $(".chzn-select").chosen({
                    search_contains: true                
                 });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $(".chzn-select").chosen({
                    search_contains: true                
                 });
                }
            });
        </script>
            
    </asp:Content>
    
    

    First, It appears Picture 1. When clicking the DDL, it appears as Picture 2

    Wednesday, September 5, 2018 9:13 AM

All replies

  • User839733648 posted

    Hi alihusain_77,

    According to your description and code, I’ve made a sample on my side and would like to give you some suggestions.

    The items list shown become transparent when it is on front of the master page footer.

    It is because of you’ve set opacity: 0.8 in the style of  .MainFieldsDivStyle.

    To let parent div transparent background but not affect child div transparency, you may use “background: rgba(201, 220, 242, 0.8)”.

    For more, you may refer to the link:

    https://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ 

    the css code.

            .MainFieldsDivStyle {
                border-color: Black;
                width: 70%;
                border-style: solid;
                margin-top: 22px;
                background: rgba(201, 220, 242, 0.8);
                /*background-color: #C9DCF2;
                opacity: 0.8;*/
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
    

    I want to write a custom Arabic message instead of "No results match".

    I suggest that you could use the F12 developer tools to check the default statement.

    You may find the class and modify the content in js.

    the js code.

        <script type="text/javascript">
            $(function () {
                $(".chzn-select").chosen({
                   search_contains: true
                });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $(".chzn-select").chosen({
                        search_contains: true
                    });
                }
                $(".chosen-container-single .chosen-default span").empty();
                $(".chosen-container-single .chosen-default span").append("<span style='font-size:30px;font-family:sakkal Majalla'>No results match</span>");
            });
        </script>
    

    I want to make it consistent with the font on the other controls.

    You could also find the related class and modify the styles of searching result in css.

    the css code.

            .chosen-container .chosen-drop .chosen-results {
                font-family: sakkal Majalla !important;
                font-size: 20px;
            }
    

    result:

    Best Regards,
    Jenifer

    Thursday, September 6, 2018 10:34 AM
  • User-786564416 posted

    Thanks a lot Mr. Jenifer for your valuable assistance.

    1 - It works fine for transparency. However, for the message I want to show when there is no match is message in Arabic language as "لا يوجد". I tried to change it in the part you suggest but still not responding, as following:

     $(".chosen-container-single .chosen-default span").append("<span style='font-size:30px;font-family:sakkal Majalla'>لا يوجد</span>");

    2 - The font for making the drop down list consistent with other control is responding only when it is showing the list. I need to show it on that font always (i.e. event if the drop down list not focus or not clicked, even if it is shown as text box).

    In the first image, it shown before clicked. In this case, I want to change its font to be as if clicked as the font of the list items shown on second image

    Second image:

    Thanks a lot with appreciation,

    Friday, September 7, 2018 11:50 AM
  • User839733648 posted

    Hi  alihusain_77,

    alihusain_77

    for the message I want to show when there is no match is message in Arabic language as "لا يوجد". I tried to change it in the part you suggest but still not responding

    I suggest that you could download the font “Sakkal Majalla” to your computer and install it. 

    I'm sorry that I am not good at Arabic, but it can be seen from the image below that the font is slightly changed.

    The download link: https://fontzone.net/font-details/sakkal-majalla 

    alihusain_77

    The font for making the drop down list consistent with other control is responding only when it is showing the list. I need to show it on that font always (i.e. event if the drop down list not focus or not clicked, even if it is shown as text box).

    You just could modify the css style of the related span as follow.

            .chosen-container-single .chosen-single span{
                font-family: sakkal Majalla !important;
                font-size: 20px;
            }
    

    result:

    Best Regards,

    Jenifer

    Tuesday, September 11, 2018 8:56 AM