Is there a way to make the custom made date field look like the DateTime field?

So I am actually having some problems... I was hoping to create the field
in one form and then I would import it into a pre-made form (#2 FULL
Customer Submits Bills and Savings Preferences) <
http://www.jotform.com//?formID=53125256402143#> but what I did not account
for is that the coding is specific to the form that is created. When I ran
the tests before, it was into a blank form, so all of the field titles
matched. I also would try to rebuild the form around this field using the
field manager app, but the problem is I am too vested into this specific
form. This form is used to prefilll fields on another form and it is twined
with other programs. So I do not think this is a doable strategy.
If I were to start from scratch is there an easy way to make this field
look like the date field? I ask this question because I was planning on
duplicating these efforts across a third form I have, which has multiple
dates involved in the form (I think 13 fields).
Thanks!

 

Hi,

 

I have moved your second concern to another thread so we can assist you better. http://www.jotform.com/answers/744695

Unfortunately, the best workaround I can think of is to add the custom date field to the pre-made form and then inject the css code again there. There doesn't seem to be any other way to make the fields look the same as the DateTime field without applying css.

 

Do inform us if you need further assistance,
Regards.

Thank you for your response.  I have been trying to do it this morning, but now the new form does not want to corporate with me. The form is #2 FULL Customer Submits Bills and Savings Preferences. And when I change the width to move everything closer together, it bounces right back when I move to another field. Do you mind helping with this issue? Or ultimately helping adjust it, as I do not think I will be able to adjust the fields for the phone unless I get some custom script like provided before?

 

Thanks!

Jordan

Hello Jordan,

Please check the screenshot below and see if this what you want to achieve:

 

If yes then please inject the following custom css code in your form and that should make the form fields appear as displayed in the screenshot above:

div#cid_217 {

    margin-left: -172px;

    margin-top: 28px;

}

 

div#cid_216 {

    margin-left: -131px;

    margin-top: 28px;

}

The following guide should help you how to inject custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Thank you! However, when I add the code, I am getting an error message saying, "styles not updated because you have 1 css error(s). Please fix them!" and then at the "x" it says,"Expected RBRACE at line 7, col 5".  I am not sure what this means...

 

Thanks! 

Hi,

 

It looks like a css code is missing a closing tag which is why there is an error when injecting the css.

Go to the Form Designer and click on the CSS tab.

Then look for the part where the X is showing in the css.

On the Form Designer, click on the CSS tab and add this: } at where the arrow is pointing in the screenshot. That should fix the error you are receiving.

 

Do inform us if you need further assistance,
Regards.

Thank you, that helped fix the error code, but it looks like I am still struggling with the original request.  I have a screenshot showing the the code that I inserted and what the field looks like after inputting it. As a result, I deleted the code out of the form. I can put it back in if needed, but it doesn't seem to work.

 

Thanks,

 

Jordan

Hi,

 

Please try this css code instead:

div#cid_217 {
   margin-left : -53px;
   margin-top : 47px;
}

div#cid_216 {
   margin-left : 2px;
   margin-top : 59px;
}

 

 

Do inform us if you need further assistance,
Regards.

Thanks Chriistian,

However, I am still running into a problem with the phone view.  It looks good for a desktop computer, but not if my customer is filling out the phone through a phone.

Hi,

 

You can inject this code to fix the problem with mobile view:

@media only screen and (max-width: 480px){

#cid_215 {

    width: 60px!important;

}

#cid_217 {

    width: 60px!important;

}

#cid_216 {

    width: 60px!important;

}

.form-line.form-line-column.form-col-1 {

    width: 80px!important;

}

line.form-line-column.form-col-2 {

    height: 30px;

    margin-top: -7px!important;

    margin-left: -10px!important;

}

.form-line.form-line-column.form-col-3 {

    margin-top: -7px!important;

    margin-left: 63px!important;

}

}

 

 

Hope this helps,
Regards.

Humm... I am not sure why it keeps looking different on my screen... I have attached another screenshot.  It also does not look right when the phone the other way with the screen rotated too...

Do you think part of the problem is at this point do we have too much code and should start over?  I am not sure which parts of the code I would need to delete though, as I have other code written in...

Jordan

 

While adjusting this, can we also make the words "birth date" on one line?

Thanks and I am sorry we are having so many problems with this. 

Hello Billbully,

You can align the label of form field to left. Please check the screenshot below:

 

 

I have fixed the alignment issue of your fields in mobile device. Can you please take a look and see if this works as expected. Please check the screenshot below:

 

Hope this helps.

Do get back to us if you need any other changes.

Thank you!

Hi Ashwin,

 

I did not see any instructions for me, except for adjusting where the label sits. Regarding the label, Ideally, I would prefer the label to sit on top (since that is how all of my other questions are) but I feel like this has been a very difficult problem (and continues to be a difficult problem) and I do not want to keep making things harder for you guys, so I suppose I can settle for moving the label to the side.

I say it continues to be a difficult problem because I did not see an improvement.  Every single screen I  look at, both mobile views, the table views and computer views, the questions are not aligned.  Let me know if you need screenshots.

I'm not sure why the form keeps looking different when I am viewing it compared to when you guys are working on it.  could this be a different problem that needs to be fixed too, and until we fix this underlying problem we will not be able to fix the main problem?

Jordan

However, I noticed that every successive tech never mentioned that they see it working ... 

As far as I understand from your thread is that you are trying to use your Birth Date field as date field which looks like a dateTime field. They are not visible at the same line because your fields which are month and year do not have any label. I will add some CSS code and get back to you soon.

First off all, delete the CSS codes that you added before for your Birthdate field and make the arrangements as you see below:

 

Then, add the code below to your CSS on designer.

div#cid_215, #id_216, #id_217 {

    display : inline block !important;

    margin-left : -0 !important;

    padding-left : 0 !important;

}

 

#label_216, #label_217 {

    visibility : hidden !important;

}

 

#id_216 {

    width : 80px !important;

}

Here is how it works:

I hope it helps.

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

humm... I thought I responded to this a few days ago, but I guess I didn't.  Unfortunately, I followed all of the steps and it still doesn't work properly.  Therefore, I think we need to try this again.

Also because I deleted all of my previous code, my question "Please select all of the channels you wish to keep:" used to be spaced (through custom code) small enough to fit three items across, but that is no longer working. I added all of the code back (as I saved it in MS Word), but for whatever reason the system no longer wants to respond to the code...

Jordan 

We are sorry for the confusion. I made some arrangements on your cloned form. It works properly on by side.

Can you also clone it and check your cloned form that I tested before?

Here is your cloned form:

https://form.jotform.com/60200951326950

We will wait for your response.

Thanks, but this cloned form does not work for me because it does not look right on mobile.  Mobile was what my original problem was, but then as we fussed with everything, things got worse, not better.

 

As as result, I have been brainstorming really hard about workarounds because this fix is obviously not easy.  I came up with something that works in theory, but I have to manipulate the information through some code writing (outside of Jotform), and I am not a code writer.  I am still giving it a shot so cross your fingers. If I can't get it to work, I will be back for this solution. 

 

Thanks,

 

Jordan

Thank you for the update. We would like to apologize for any inconvenience. I'll also try to check for any other workaround to help you with your concern. 

Kindly update us also if you have found any solution on your end.

Thank you.

Is this what you would like to happen to the Birth Date field on your form?

You can find the CSS codes I have injected to your form here: http://pastebin.com/jReUVtc8

Here's the clone version of the form: https://form.jotform.com/60222217067951

Feel free to clone it so you can inspect it.

I would suggest you try to remove the CSS codes I have added so you can view how it was before the codes were added.

Please be reminded that I've added three different fields on the form for Month, Day, and Year.

I have not shrunk the three fields and left it expanded. I have labeled the Month field "Birth Date". And the other two are just "letters" c and b respectively. I did that so it will only take one line for the field label. (You can rename it to your preference also)

By the way, I also changed the width of each drop-down via their properties.

After all those, that's the time I added the CSS codes. 

I hope this helps. Let us know if you need any further assistance. Thank you.