Form Formatting

Scriptcase 8 Discussion
#1

Group,

Maybe I’m thinking in a box here, but I’m unable to figure this one out. All my forms pretty much look like:

text field
text2 field2
text3 field3 e.t.c.

I know I can add blocks to have things next to each other but that’s not what I’m looking for here. It’s actually never been an issue, but now I’m trying to create something a bit prettier where I could have an introduction of sorts at the top of the form. So something like:

      ........... This is my introduction covering
      ............the width of the form, starting at
      ........... the left edge going to the far right.
      .......... Please fill in the following fields:
      ......... (used dots for spaces as the form hides them on this forum)

text field
text2 field2
text3 field3 e.t.c.

I can’t figure out how to do it?? I’ve tried datatype “label”, taken the ‘label’ snippet out, and just entered text, but then I get:

       This is my introduction covering
       the width of the form, starting at
       the left edge going to the far right.
       Please fill in the following fields:

text field
text2 field2
text3 field3 e.t.c.

What am I missing? Any suggestions would be very much appreciated!

Cheers,

Mark.

#2

I think I’m missing the point as the two samples below are similar, at least I don’t see the changes. Issue is that you want a header text above your fields and I think that you want to use the space of the label field too. You can suppress the title of the label. Is the following link showing you (more or less) what you want?

https://www.nowdue.eu/prod/

#3

Hi again Aducom!

Yeah every time I edit my submission above it removes the spaces. The paragraph sits on the right side of the form instead of reading all across the form page.

Looking at your example, the bottom of the form is what I’d like to do. Where yours reads “NowDue.eu verzorgt de digitale betaalmethode voor uw vereniging, stichting of bedrijf. Voor IDeal betalingen maken wij gebruik van TargetPay, een door de DNB goedgekeurde provider. NowDue.nl is een initiatief van Aducom Software Groningen en is ingeschreven in de Kamer van Koophandel te Groningen onder nummer 02090396 (Vestigingsnr. 000009052127).”

When I delete the label portion, it just leaves an empty space on the left side (where the title normally is) and the body of the label is off to the right side (where the fields normally sit). How were you able to get it to read across the page like that? :slight_smile:

Sorry if I’m missing something very rudimentary but appreciate your help as always!

#4

This text is just a label field, but I set the space for the title to 1 pixel. Scroll down on the field to get to the css part.

#5

aducom you’re a star, thank you!

Took me a bit to figure out what you were doing because I couldn’t get it to work with the default block layout. I put 1 px for the width of my field, and it just shrank the entire left column so the labels I did want seen, then wrapped to new lines - not looking good at all. So I created a new block and changed “label position” to “Above”, then moved the text field into that block and it worked exactly as you have yours - even with out the 1px CSS setting =)

So thanks again for your help! Always much appreciated sir.

Mark.

#6

Hi there,

I’m also trying to suppress the field titles and shift the fields back to the left to remove the gap, but can’t seem to get it to happen.
I’ve left the field title blank and then set the CSS of the Title to 0px wide and also tried 1px wide and neither has any effect.
What am I doing wrong?

Also, what is the difference between the CSS of the Input Object and the CSS of the Field?

Chrispy

#7

I worked out the CSS differences by colouring the background with 3 different colours which clearly showed the extent of the 3 objects

#8

Chrispy,

Did you look at your Block configuration? Under Layout, Blocks, maybe you could try uncheck the “Display Title” & “Display Label” boxes for the block that your element sits in?

Just throwing out an idea, you might have already done that =)

Mark.

#9

Thanks mslatter, hiding the label in the block did the trick. I didn’t think of looking there!

#10

Glad you got it working like you wanted it to Chrispy, and happy to be able to help!