Table in Joomla not resizing properly? - html

Question

I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.

Answer 1

Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.