Is It Possible to Use CSS to Target Various Elements of the Submissions Count Widget?

  • Profile Image
    Masalamedia
    Asked on March 25, 2015 at 11:54 AM

    When you get the CSS designer tool to isolate the DIV for the Count Submissions Widget (no small feat - it doesn't seem to want to be selected) it doesn't correctly place the CSS labels in the editor window. This makes it impossible to alter key formatting issues like font color. My form background is dark so the default black text renders this widget unusable.

     

    ALSO there is a line break between the BEFORE label and the counter data; and there is another line break between the counter data and the AFTER text. How do we get rid of this unwanted line break?

  • Profile Image
    david
    Answered on March 25, 2015 at 01:22 PM

    Hi,

    Since many of our widgets are loaded in to iFrames, they are not directly accessible in the form designer and CSS cannot be applied to them outside of the widget setup itself.  This happens to be one of those widgets.  The only customization available for it currently is the before and after text:

    I couldn't see the line breaks you were referring to:

    In any case, due to the limitations on the widget, I fear these also cannot be removed.

    If you have any further questions, let us know and we will be happy to help.

  • Profile Image
    Masalamedia
    Answered on March 25, 2015 at 01:28 PM

    OK - wow, major bummer. But thanks for clarifying.

    The line break is that "41" is on a separate line from "submissions so far". 

    As noted I can't use this widget since it is invisible against my page design. I am sure you can understand the disappointment that an elementary task such as changing font color is unavailable.

     

  • Profile Image
    Ben
    Answered on March 25, 2015 at 02:41 PM

    Our widgets team is working on making it possible to easy change the style and I presume that they want the widgets to be editable by Form Designer, but in the mean time, it is as mentioned by my colleague.

    The only thing that I would suggest is to (this is not a clean and nice way to resolve this) add a Text field and alter CSS to have it right under the text, with a transparent white color, which would allow the text to be more easy to read.

  • Profile Image
    Masalamedia
    Answered on March 25, 2015 at 02:52 PM

    thanks for the suggested workaround... 

  • Profile Image
    raul
    Answered on March 25, 2015 at 04:07 PM

    On behalf of my colleagues, you're welcome.

    Feel free to contact us again, should you require our assistance.
    Best Regards.

  • Profile Image
    chinathinksbig
    Answered on November 07, 2015 at 09:47 AM

    a follow-up to this question: does this widget have the option to be hidden now?
  • Profile Image
    victor
    Answered on November 07, 2015 at 12:50 PM

    To assist you better, I have created a new thread which will be answered shortly.

    http://www.jotform.com/answers/699990

  • Profile Image
    abajan
    Answered on November 07, 2015 at 02:46 PM

    @Masalamedia

    Just in case you were unaware, since our last reply to your questions the Submissions Count widget has been updated with a section where CSS can be used to style it:


    For example, the line break to which you referred was removed in this form. If you clone it you'll see the following CSS in the widget's settings:

    #text-before {
     margin-left: -8px;
     width: 200px;
     text-align: left;
    }

    #count {
     position: absolute;
     top: 8px;
     left: 177px;
     font-weight: bold;
     color: red;
    }

    Do inform us if you need further help with this.

    Thanks