carnagelp

Okay… I checked it now and it seems to be working fine.

HOWEVER, there’s another issue. Accessing the same page on a mobile browser (chrome) results in none of those forms being shown at all.

Please see this screenshot: https://ibb.co/1m0RRp7
You can only see 3 lines where the calculators are supposed to be

I tried clearing the cache here but it doesn’t work.

Not sure why this is happening :/

I think I didn’t communicate the problem properly. Let me try again:

The forms load perfectly fine when opening the page in firefox. See screenshots here:
https://ibb.co/K64NvVz
https://ibb.co/KmFzN2B

However, the same form loads incorrectly in Chrome as seen below:
https://ibb.co/RP40yFG
https://ibb.co/xCyRbC9

1) The contents of the form are supposed to be center aligned with the label on the side (not top).
2) The “Results” section of the page is supposed to show up only upon clicking calculate in the first screenshot. This happens in Firefox but in Chrome, the “results” section is shown by default even before you hit Calculate
3) The white text of calculate can’t be seen when opened in Chrome.

Hope this clarifies

I tried what you mentioned and now that error doesn’t seem to be there anymore. However, I now get this error: https://ibb.co/rvy3Pyv

The code above fixes the dropdown font issue and it removes the header and footer of the page. However, it does not remove any body content before or after the form. So the end result of printing just the form doesn’t happen ??

That won’t work because I am specifically looking to print only the form.

Do you know the reason why only the dropdown field has the problem?

So the thing about the font families is that it IS preserved for all form fields EXCEPT dropdowns. Even if I configure the font to work with the method you mentioned, it won’t show the box or the positional formatting without adding a ton of extra css code.

Is there a reason why this happens only to dropdown fields? And is there anyway to tackle that problem as a whole and make it function like the other fields on the form.

You can click the print button on the page to see what I mean.

PS: The div tag thing worked beautifully. Thanks!

Both of the above fixed the issues. Thanks again!

Oh, and how do I remove this line: https://ibb.co/wgw8txs

The section break margins don’t change even if I change the numbers set. For example, I have now set it to 30px for top and bottom but it looks exactly the same.

Also, if you look carefully, you’ll see that the blank space between the element above the each section break is clearly smaller than the space below it; signifying different margins even though they’ve been set the same. This difference gets even bigger in mobile view. How do I make it uniform and actually change as per whatever setting I put in for margin-top and bottom?

The blue line hiding and opacity disabling worked btw. Thanks for that!

I don’t think you quite got the issues I’m talking about. The screenshot above still shows the problems I’m trying to fix.

1) The slider color is set to #f0557b. But the color seen above is a much lighter shade of that. Looks like opacity:35% or something. I’m trying to remove the opacity so the #f0557b color appears as is.

2) The separator margin/padding above and below is lesser than what I’ve set it. Even if I add a higher value or add !important it’s still not changing.

3) I had asked for how to remove those vertical blue lines on the left side of the separator (and also in the fieldset label). No idea how to do that.

PS: I’m always checking the page with ?nocache=1 so it loads a non cached version

SECTION BREAK code:

.cp_cff_11 #fbuilder .fields.section_breaks
{ 
		margin-top:20px !important; 
		margin-bottom:20px !important;
		background-color: transparent !important;
		border: 0;
		border-top: 1px solid #f0f0f0 !important;
		height: 1px;
		margin: 2rem auto;
		text-align: center;
		width: 80%;
}
.cp_cff_11 #fbuilder .fields.section_breaks>label{font-size:1.3em;font-weight:900;text-transform: none !important;border-bottom:1px solid #dcdcdc}
	.cp_cff_11 #fbuilder .fields.section_breaks .section_break{border:0;}

SLIDER CODE:

#fbuilder .cff-slider-field .slider
{
background:#DADADA;
border-radius: 10px !important;
border:0 !important;
height: 0.3em !important;
}
#fbuilder .cff-slider-field .ui-slider-handle
{
	background:#f0557b !important;
	opacity:1 !important;
	border:0 !important;
	top: -0.35em !important;
height: 1em !important;
border-radius: 0.15em !important;
width: 1em !important;
}
#fbuilder .cff-slider-field .ui-slider-range
{
background:#f0557b;
border:0;
height:5px;
background-image: linear-gradient(to right,#f0557b,#f0557b)!important;
}
#fbuilder .cff-slider-field .dfield.slider-container
{
padding-left: 10px !important; 
border-radius: 10px !important;
padding-right: 0px !important;
padding-top:5px !important;
}
#fbuilder .cff-slider-field .slider-caption
{
    font-family: "Rajdhani","Roboto", "Arial", sans-serif !important;
		font-size:20px;
		font-weight: 700;
		word-spacing: 1em;
}

IMPLEMENTATION ON THIS PAGE:
https://www.fitgirls4life.com/testing-calculators/?nocache=1

I feel so stupid right now. Wasted so much time when all it took was that one setting change (facepalm!). Thanks a ton!

The !important modifier also pretty solved most of my other issues. Except 2:

1) Separator fields margin/padding settings aren’t working even if I use the modifier.
2) Slider color opacity. I used the opacity:1 code and used !important but the slider still shows a light shade of the color I’ve set.

Oh and how do I get rid of the blue vertical bar on the left side of the separators and the fieldset label? As well as that faint gray line on the left side of the fieldset area? They seem to be default inbuilt in the form template.

That did it. Thanks!

https://www.fitgirls4life.com/testing-calculators/?nocache=1

Select “Imperial” under the ‘Unit System’ dropdown to show the HH:MM field.

The result is shown in the field directly below it.

Upon checking the results of each individual CDATE operation; I found that:

CDATE(fieldname1,’h’) results in a fixed value of 05
and
CDATE(fieldname1,’i’) results in a fixed value of 30

Hence the result: 90

And no change in either hour or minutes in the date field is making any change in the above.