I have a text array question with 5 columns, each with custom widths. However, the 2nd and 3rd columns have no little space in between. Is there a way to add space in between these fields? To accomplish the custom column widths, I used the following code:
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
///////// REPLACE QQ WITH QUESTION ID //////////////
//// FIRST HIDE SOME FIELDS ///
$('input[name="435562X3X63SQ004_SQ004"]').attr('hidden', 'hidden');
////////////// VARIABLE ARRAY COLUMN WIDTHS ////////////////////////////////////////////////////
// Get rid of all the widths that the API imposes
$( 'div#questionQQ table.question col' ).attr('width', '');
$( 'div#questionQQ table.question thead td' ).attr('width', '');
// Define a width for the question table so we can do so for its children
// NOTE: Keep this to 95% or less so IE will behave
$( 'div#questionQQ table.question' ).attr('width', '95%');
// Define the column widths
// Add or remove columns and adjust widths as necessary but widths should add up to 100%
// Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....
$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column
$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'10%' }); // First answer column
$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'10%' }); // Second answer column
$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'60%' }); // Third answer column
$( 'div#questionQQ table.question tbody td:eq(3)' ).css({ 'width':'10%' }); // Third answer column
// Push the text input widths to 95% of their parent containers
$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });
// Align the answer text
$( 'div#questionQQ table.question tbody th' ).css({ 'text-align':'center' });
});
</script>
Sorry. I'm still a newby at LS, and thought it was just a matter of loading it. Would a screenshot help? It shows the area of concern between columns 2 and 3.
This is simply a function of the "95%" width applied to the inputs. The wider the table cell, the larger that remaining 5% is.
Try putting the input widths to 100% and adding some more padding to the cells.
Code:
// Push the text input widths to 100% of their parent containers
$('div#questionQQ table.question tbody td').css({ 'padding':'4px' });
$('div#questionQQ table.question input[type="text"]').css({ 'width':'100%' });
Cheers,
Tony Partner Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
