Layout!!

[fpk]

Hello all,

I have an issues with my text layout issue, i am trying to use the layout options:
CSS class for label:
CSS class for field:

to actually edit my fields because they are coming to too big and unprofessional on my page can someone tell me of you managed to actually make it work by creating a new class on CSS and the calling it, i seem to struggle with it.


many thanks in advance

[Benno]

Hi,
backend -> components ->ck forms -> Edit CSS.

Insert i.e.

.numbfield
{
width: 10%;
font-size: 12px;
}
Go to the field.
Insert in CSS-class for the field:
numbfield

Ready.

[Sanchez]

Hello, I also have a layout problem. Under FF 3.5 the form is displayed differently than IE 7.
Firefox shows the correct representation.
Give it a solution?

[Benno]

As shown in my last post create a class with the width of the field you really need and then try again.
Benno

[onglai]

Hi Benno,

Thanks for sharing.

I try exactly what you suggested, also using the exactly code you have given here (I copy and paste). And it completely have not effect whatsoever to the form. Nothing actually happen.

I seem some other also suggested similar thing, but it don't work also.

Are we missing something here? Does the Layout tab in CKForm actually work? Have you actually try it on CKForm? or are you just sharing general css practice? Because this really don't work in CKForm!

Thank you for sharing.

[sixeyeco]

I'm not an expert but I was able to make some changes to the way the form looks by editing Joomla!'s template.css. Apparently the form inherits many of it's attributes from that file. It probably depends on whether you are displaying the form as a component or as a module.

I used a program called stylizer 5 http://www.skybound.ca/. Wow, is this easy. There's a free/demo version. It displays your website on the left and shows the code on the right. I clicked on the element of the web page I wanted to edit and it made the change in the code. The save menu offers choices. I can save a local copy of the file, ftp it up from within Stylizer 5 or cut and paste. Awesome.

[wiresax]

I've used this solution and it works first time. Whilst I've done a bit of programming I've not done much with CSS. I copied the example code into ..ckforms.css, added 'numbfield' to
the 'CSS class for field', saved both the .css file and the field and, refreshed the browser and ...it worked.

Is there any chance you copy and pasted '.numbfield' into the 'CSS class for field'.

Had a dozen fields done in literally two minutes.

[lyyttomm]

It seems I have the same problem as onglai is facing.

All my fields on the form are same width, bulky looking. I can change forexample the color of the text at the "CSS class for label" or "CSS class for field", but I can't change the size of them...

I have another site, where none of these troubles exists. Forms looks beautifyll. Textfield is nice size, about 200px width and textarea is full width. Both sites are Joomla 1.5.xx and has almost the same components installed and the CK Form's forms is used as an Article.

I'm wondering that might there be some sort of oweride going on with the CSS-styling. That some other CSS-statement is oweriding the CK Forms own CSS-statemenst. I was looking through the other CSS-files to find statements for FORM, LABEL, INPUT -tags, but there really isn't much of those at the other files.

The Tempalte.css file has some statemets for FORM, but to disable those lines don't make any difference for the CK Form forms - thay are still long and bulky looking.

I don't really know whats the trouble... I'm planning to disable other modules/components and to somehow to corner the troublemaker for this issue...

EDIT: I realized that I do can change the color of the form-items, but changing their size is impossible... alwasy max-width