Design and CSS styles
Version 6.x > Design and CSS styles > Forms and CSS - CSS code gets overwritten, and how to control input boxes View modes: 
User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/6/2013 8:17:04 PM
   
Forms and CSS - CSS code gets overwritten, and how to control input boxes
Hello,

Two more questions on Kentico forms:

1. How can I add input controls like a text box on the same line? Every input control I add gets its own line, but I want to have three text boxes on a line, like so:

Phone Number
Area-code Prefix Suffix
<box1> - <box2> - <box3>

instead, I get
Phone number
Area-code Prefix Suffix
<box1> -
<box2> -
<box3>

2. I have one line for CSS in the same form and whenever I edit it Kentico automatically deletes this line so I have to manually enter it every time I edit the form:

<body id="page5">

Is there a way to stop this?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 6/6/2013 10:55:10 PM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
View the source of the form when creating it. You'll find there are <br /> tags after your input boxes. Remove them and they will render on the same line. If not, you may have to style it accordingly.

In regards to #2, why would you have a <body> tag in your form? That belongs at the page level, not a biz form. The editor is most likely reading the input and "cleaning" it up prior to saving it which is why it is being removed (the cleaning process finds it is not correct).

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/6/2013 11:40:48 PM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
Thanks for another tip.

Actually, there AREN'T any <br /> tags. The code just looks like <td> $$Input:Phone1$$$$Validation:Phone1$$</td>.

I tried creating a table within the cell and moving the input boxes into the table so that they'll line up, but because it's a table within another table's cell, the cells appear too big.

Here's a sample of the code:
<td>(例)山田 太朗<br />
姓$$input:LastName$$$$validation:LastName$$ 名$$input:FirstName$$$$validation:FirstName$$様宛</td>

As you can see, there's no <br> between $$input:LastName$$$$validation:LastName$$ and $$input:FirstName$$$$validation:FirstName$$様宛

I also learned I can adjust the width of the input box size on the field properties but they still somehow add a <br> after each $$input:variable$$.

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/6/2013 11:42:17 PM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
#2 (Sorry, forgot to reply to that).

The reason why is that the CSS changes based on which page you're looking at. The form is on page 5 which has the company logo to the left of the form and it formats the rest of the page. When the <body> tag is left out, the formatting gets all messed up. Adding it was the only way I could get the page to form correctly.

User avatar
Kentico Support
Kentico Support
kentico_jurajo - 6/7/2013 3:45:14 AM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
Hi,

you will need to use another element to distinguish this - or, you can use different content before/after HTML in the form web part configuration.

In a valid HTML there should be only one BODY tag - and this one is already there from the master page.

Best regards,
Juraj Ondrus

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/7/2013 3:49:47 AM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
On the body tag - where do I find/edit the tag on the master page for this page?

Sorry to ask such a basic question, but it's easy in HTML to just add the tag. It's hard to find it in menus in Kentico (for me, at least)

User avatar
Kentico Support
Kentico Support
kentico_jurajo - 6/7/2013 4:26:43 AM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
If you are using ASPX templates - it is in your master page.
If you are using portal engine - it is in CMSPages/PortalTempalte.aspx file - this is the master page for all sites in given CMS instance. So it can have global impact if you will change anything there (I would not recommend it - you can break some other functionality).

Best regards,
Juraj Ondrus

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/9/2013 9:03:24 PM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
Jurajo,

That's the problem - I don't know where to put it, and Kentico doesn't make that easy at all. I have to put it in the form itself since I have NO CLUE as to where else to put it.

User avatar
Member
Member
chris.worthington-barclayvouchers.co - 6/9/2013 10:18:28 PM
   
RE:Forms and CSS - CSS code gets overwritten, and how to control input boxes
I want to say thanks to both Froggeye and Jurajo for your help. I now have my form looking just how I want using the HTML code directly. I can't say I'm not disappointed that I couldn't find an easier way to do this in Kentico, but you guys really helped me a lot. Thanks a million!