submit / reset button placement

[raunhar]

In the fabric 3.2 version, the action buttons: submit and reset have a lot of space between them.

How do I remove this space, so that the buttons are close to each other.

A screen shot is attached for review.

 

[troester]

As I've said in your other thread:
use a browser dev tool to examine which CSS is overridden by your Joomla template and has to be reset.

 

[raunhar]

It is not on one template but on three installations that I did, on different templates.
all were showing the buttons far apart.

 

[myfatebiz]

As troester said you need to overwrite the template. If you don't know how to figure out, nah try using my template and see how it going.

 

[raunhar]

thanks a lot. It is as I required.
Can you tell me the changes that need to be implemented in the css

 

[myfatebiz]

You can check inside faizi.css and use inspect element right click on the browser to see the class or id.

 

[raunhar]

I need to add a border to the form, and have the background of the form to be coloured.
how can it be achieved.

 

[myfatebiz]

Inside template css.

.fabrikForm {
border: 1px solid #000;
border-radius: 5px;
background: #dcd;
}

 

[raunhar]

I have been using this template for the forms, but on a particular web site, where I am using the form as a module inside an article, the fields are not of the same size inspite of all being set to xlarge.
You can check the website;
www.bachpanglobal.com/enquiry.html
the state and city fields are small.
And one strange problem is that, when captcha is enabled in the forms, the form does not work.

 

[myfatebiz]

1. Please use css to customize your form field size. Example :

#jos_fabrik_enquiry___state_of_india .input-xlarge {
 
height: 28px;
 
}

2. Please check your captcha setting or you can try switch the form template to see where the problem is.

 

[raunhar]

where do we add this code.

 

[cheesegrits]

Have you looked in the wik?

http://fabrikar.com/forums/index.php?wiki/form-and-details-templates/#the-custom-css-file

And have you followed troester 's advice, and figured out how to use either Chrome's developer tools, or irebug in FF, or developer tools in IE, to "inspect" you page, so you can figure out what is going on in the CSS?

In a "shared sandbox" environment like J!, where there are many different CSS files being used form different sources (J! itself, your site template, any plugins which apply CSS styling, Fabrik, etc) you will quite often find issues where CSS classes are being overridden, and you need to work out what is going on. All browser dev tools have simple CSS inspectors, which let you just click on the object you want to know about, and will show you exactly what attributes are being inherited from what CSS file, and also let you enable / disable / change things on the fly, to make it really easy to figure things out.

-- hugh

 

[raunhar]

As troester said you need to overwrite the template. If you don't know how to figure out, nah try using my template and see how it going.

The form Labels are showing at Top, instead of Left.

How to show them in left.

http://192.185.163.163/~shriguru/index.php/alumni-form

 

[troester]

Use a standard template like protostar or reset the CSS settings your Joomla tempate is setting.

 

[myfatebiz]

.fabrikLabel {
float: left;
padding: 5px;
}

 

[raunhar]

I am using the template on http://www.bachpanglobal.com, but it is creating a conflict with a newsletter module.
WHere ever I use this template, the news module size gets larger. On the pages with no form, has normal module display.

 

[raunhar]

I used bootstrap_faizi .
The URL is:
http://www.academicheights.in/modi/career.html

Now li button is showing and the Reset gets disappered on hover.

 

[troester]

It's really no Fabrik problem if your Joomla template is setting text color to white on hover.

 

[myfatebiz]

raunhar, you need more hard learning about css styling. It's very easy to learn.

Put this code inside bootstrap_faizi template

button.btn[type="reset"] {

color: #000 !important;​

}