Is your Joomla table experiencing resizing issues?

I am currently working with Joomla to build a basic website. I installed the Form Maker Lite survey extension by Joomla Extension Survey for creating surveys and questionnaires.

After publishing the extension on my Joomla site, I encountered an issue trying to resize the table. I attempted using width: px in the CSS to adjust the table size, but it was not effective.

Here is the generated CSS for the table:

#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}

I had difficulty sharing the HTML code here, so I used this JSFiddle link which did not display the table properly - My JSFiddle

Even after attempting 

table-layout: fixed; overflow: hidden;
, I couldn't successfully resize the table width as desired.

Unfortunately, I cannot provide website access due to limited control over link sharing permissions. Apologies for that.

If anyone has any suggestions or solutions to help me out, I would greatly appreciate it.

htmlcssjoomlacss-tablesjoomla-extensions

Answer №1

After a brief examination of the component, it appears that certain styles are being applied to make the form's width 100% pixels 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>

It seems that Form Maker Lite is adding inline styles to the form elements which cannot be edited, hence the need for !important to override them.

The styles mentioned above are altering the default "contact" form in the Joomla 2.5 version. It is possible that different forms may produce different code.

If you do not already have it, I suggest installing firebug to inspect the generated CSS and make the process of overriding styles much simpler.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...

jqueryasp.netcss

React powered interactive tables

I am in the process of creating a dynamic table using React, and here is the data structure I am working with: { numRows: 2, numCols: 3, cells: [ { id: 1, pos: { row: 1, col: 1 }, content: 'This is th ...

javascripthtmlreactjshtml-table

Using javascript, what is the best way to clear a text field with a specific condition?

When I clear the text field #t1, I expect text field #d1 to also clear. However, the last two lines of code do not achieve this result. function utl() { var tField = document.getElementById('t1'); var dField = document.getElementById(&a ...

javascripthtml

Is there a way to remove the bold styling from text next to JavaScript?

I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...

javascripthtmldreamweaver

Invoking a Jquery Dialog

Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...

javascriptjqueryhtmlasp.net

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

htmlcssgoogle-visualization

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to transfer data from an HTML input field to a PHP script?

Within my patient_display.php file, I am calling the patient_history.php script and passing along the P_ID. Here is an outline of my code. patient_display.php: echo '<form name="Patient" action="patient_history_display.php" method="get">'; ...

phphtmlsqlforms

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml

What is the best way to ensure a bootstrap sidebar collapses without altering the content width?

How can I create a bootstrap sidebar collapse without affecting the content width? To view my code, please visit Codepen $(document).ready(function() { $('#sidebarCollapse').on('click', function() { $('#sidebar').tog ...

csstwitter-bootstrapbootstrap-4

Pressing one button triggers different actions with each click

<script> function one() { // code for function one } function two() { // code for function two } </script> <button onclick="one(); two()">Click Me</button> This will execute both functions simultaneously. I am looking to fi ...

javascripthtml

Bootstrap Toggle Button with Dropdown Menu

I have a button-group with font awesome icons and a dropdown on one of them, as illustrated in the example below. I am trying to toggle the button status, but for some reason, the 'active' class is automatically removed on mouseout. It seems to ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

How come my navigation item isn't positioned at the top of the window?

I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...

htmlcssbootstrap-4

Ensure that the flex items are utilizing the full height of the parent when the flex-direction property is set to row

I'm currently working on a layout with 3 flex items in a flex container, each having equal height and width. While I've managed to achieve equal width for all 3 items, there's an issue with the first item. It contains a div (.images) that se ...

htmlcssflexbox

Tips for effectively sifting through your news feed

I have developed a Chrome extension that extracts newsfeeds from social media pages. However, I want to ensure that posts from specific social media accounts that users follow are kept without injecting but rather filtering them. The challenge lies in the ...

javascripthtmlgoogle-chrome-extensionclientlazy-loading

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert

What is the method for automatically scrolling a WebView HTML document?

I am seeking a way to implement autoscroll on my webpage. Here is the solution I have come up with: public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCon ...

javaandroidhtmlautoscroll

I am looking to display text dynamically on a web page that is retrieved from a MySQL database and shown in a text box

Here is the code snippet I'm working with: // Set up event listener for when ".thoughts_box" input field loses focus $(".thoughts_box").blur(function(){ var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1]; // Cal ...

javascripthtmlmysql

I am attempting to draw a correlation between two numerical variables

I'm struggling to compare two scores in my game. When they match, I want it to display "You won", but I can't get it to work. I've attempted using the parseInt method and .val method, but no luck so far. var numberFour = Math.floor(Math.ra ...

javascriptjqueryhtml

Determine whether to show or hide a div based on the width of the

Is there a way to dynamically hide a div using Bootstrap 4 based on the screen width? Can this be achieved without using JavaScript? I am particularly interested in hiding certain text elements that are not relevant on smaller screens, such as mobile de ...

csshtmltwitter-bootstrap-4-beta