asmSelect Widget: Allow to customize or edit the "Please select" text hint

  • Benflips
    Asked on July 17, 2016 at 9:57 PM
    I’m trying to decide between this (multiple select widget) and the asm widget (which you’ll notice I've inserted below it). Some questions to help me decide:
    Is it possible to change the ‘hint text’ from ‘Please Select’ in the asm widget? 
    Can you change the colors and background of selected options in asm to look like the selected options from multiple selection widget? - the white on blue looks striking, is more aesthetically pleasing, and really stands out, but I don't feel that the widget itself is as user-friendly and intuitive as asm widget (because with asm the "please select dropdown" remains and the options populate below it rather than crossways within the field itself).
  • Ashwin JotForm Support
    Replied on July 18, 2016 at 3:28 AM

    Hello Benflips,

    Is it possible to change the ‘hint text’ from ‘Please Select’ in the asm widget? 

    Please inject the following custom css code and that should solve your problem:

    select#bsmSelectbsmContainer0:first-child {

        display: none;

    }

     

    Can you change the colors and background of selected options in asm to look like the selected options from multiple selection widget?

    Yes it is possible to achieve this by injecting following custom css code in form:

    .bsmListItem {

        text-shadow: 0 1px 0 rgba(0,51,83,.3) !important;

        -webkit-border-radius: 3px !important;

        -moz-border-radius: 3px !important;

        border-radius: 3px !important;

        background-color: #1b9dec !important;

        background-image: -moz-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: -webkit-gradient(linear,0 0,0 100%,from(#1da7ee),to(#178ee9)) !important;

        background-image: -webkit-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: -o-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: linear-gradient(to bottom,#1da7ee,#178ee9) !important;

        background-repeat: repeat-x !important;

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0) !important;

        -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03) !important;

        box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03) !important;

    color: #fff !important;

        border: 1px solid #00578d !important;

    }

    Please check the screenshot below how to inject custom css code in ASM widget:

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 1 Screenshot 20

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Benflips
    Replied on July 18, 2016 at 7:45 AM
    To your first advice - what does this code achieve? I want to know whether
    you can change the text to anything different or not...it seems your code
    ...
  • Charlie
    Replied on July 18, 2016 at 10:22 AM

    I'm sorry, but you cannot change the "Please select" text in the asmSelect widget. It should be possible using CSS code to somehow hide the "Please select" in the list which is what my colleague's first code should be doing, however, it seems like it is not working.

    The second code block given by my colleague redesigns the style of the selected options, you should be seeing it like this:

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 1 Screenshot 20

    I'll forward this to our developers as a feature request to allow users to make the "Please select" hint more editable. I'll also try to come up a working CSS code for it. 

    Apologies for the inconvenience.

  • Benflips
    Replied on July 18, 2016 at 7:20 PM
    It appears my earlier response was truncated.
     
    It continued...
     
    "To your second herculean effort - thank you.
     
    However, I've noticed a couple of issues - I've just experimented with the first asm in my form - input 314.
     
    First, on this particular asm, I already have some custom code; if I delete that code, your code works great - but it changes the size of the field that has been customized. I wasn't sure which of the code was otherwise conflicting with yours, so I put it back - can you tell me what needs to change or be deleted? I have at least one other asm in the form at the moment that I will likely be applying this code to, so if they have custom code I need to know what the conflicts are likely to be there too. I am also likely to replace most of my multiple selections widgets and there are quite a few of them throughout the form...so if width or other aspects need to be controlled from within the widget (as opposed to general form css) I need to know how to do this.
     
    As for your changes themselves - wow. Looks great. However the delete button retains it's red colour, compared to the white of the mutiple select widget. Can this be changed?
     
    Also, on this first input_314, can you identify why if the first choice is selected ("More than once / week") it initially wraps to a second line, then changes back to one line, BUT the spacing of the line remains as though it needs 2 lines? Every other answer, just populates to one line...any thoughts would be appreciated."
     
    Just wondering if you could address these aspects so I can roll out the code across my form.
     
    Thank you
  • Chriistian Jotform Support
    Replied on July 18, 2016 at 10:57 PM

    First, on this particular asm, I already have some custom code; if I delete that code, your code works great - but it changes the size of the field that has been customized. I wasn't sure which of the code was otherwise conflicting with yours, so I put it back - can you tell me what needs to change or be deleted?

    I checked the code that you have added and the code provided by my colleague, and they seem to be different classes so they should not conflict with the other. I do not seem to notice any changes other than the color of the option. Can you please send us a screenshot of the issue you are referring to so we may check it further. Thank you.

    As for your changes themselves - wow. Looks great. However the delete button retains it's red colour, compared to the white of the mutiple select widget. Can this be changed?

    The css code below should change the color of the button to white.

    a.bsmListItemRemove {

        color: #ffffff;

     

    }

    Also, on this first input_314, can you identify why if the first choice is selected ("More than once / week") it initially wraps to a second line, then changes back to one line, BUT the spacing of the line remains as though it needs 2 lines? Every other answer, just populates to one line...any thoughts would be appreciated."

    The 2 line text is modified using custom script, which is why it automatically adjusts to only one line after. Unfortunately we will not be able to edit this. However, what we can do is to modify the height of the first selection so that it will always have the spacing of one line. Simply inject the css to the widget's css area.

    li.bsmListItem:first-child {

        height: 25px!important;

     

    }

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 1 Screenshot 20

  • Benflips
    Replied on July 18, 2016 at 11:26 PM

    Okay, so if i make your changes to a 'clean' asm widget it works great (see first screenshot).

    If I apply it to the one described above, the white cross has taken effect, but the other colour changes have not. (see second screenshot)

    If I remove the other custom css that is currently in that widget, the colours DO change, but it alters the width of the label (I'm not sure if that original code does anthing else?)

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 1 Screenshot 30

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 2 Screenshot 41

     

  • Chriistian Jotform Support
    Replied on July 19, 2016 at 1:20 AM

    Thank you for sending the screenshots. After further checking, I was able to identify that the issue was being caused by an extra RBRACE } in the css. Once this extra brace is removed, the changes to the color should now apply without the width of the field being affected.

    .bsmContainer:after {

        content: " You can choose more than one option! ";

        color: #333;

        position: relative;

        font-size: 12px;

        display: block;

    }

    #bsmSelectbsmContainer0 { width: 100%; }
    }      <-delete this extra brace in the css                 

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 1 Screenshot 30

    Result: 

    asmSelect Widget: Allow to customize or edit the Please select text hint Image 2 Screenshot 41

     

  • Benflips
    Replied on July 19, 2016 at 2:45 AM
    Thank you!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Nik_C
    Replied on July 19, 2016 at 3:56 AM

    On behalf of my colleague you're welcome.

    If you have any further questions please let us know.

    Cheers!

  • forusretail
    Replied on September 27, 2016 at 3:52 PM

    Is it possible now to change the hint text in the asmSelect widget? I want lo change that "Please Select" for something else.

    Cheers

  • Nik_C
    Replied on September 27, 2016 at 5:49 PM

    @forusretail 

    I opened a separate thread for you and you can find it here. We will attend it there. Please open individual thread for each question so we avoid confusion.

    Thank you!