I've been banging my head on a wall attempting to figure out why my CSS isn't working like I expect it to in Modern Forms...
Use Case: Client wants a collection which is controlled not by the 'Add' Link and the X buttons for adding and removing rows of the collection, but instead a Radio Button field with options 1 through 5. I've been able to implement JavaScript with the LFForm Object to accomplish this (I'll reply with details on this for those interested), however I'm having an interesting problem when I'm attempting to hide the standard Collection Add Link and Remove Buttons.
The CSS circled in blue isn't applying to the Add Link and Remove Buttons yet the Purple circled one is.
I was attempting to make the CSS for removing the Link and Buttons dependent on a CSS Class on the Collection itself so that if I needed another collection with normal functionality I could do that however the CSS for using the Collection CSS tag isn't working and I can't figure out why not. Only the overly ham-fisted CSS of hiding all Add Links and Remove buttons is currently working and I have to add an !important tag to it because another style after the custom CSS is setting the Link back to display: inline-block...
Everything I know about CSS tells me that the CSS Class filtered should be applying to the Add Link, but it's simply not and I'm at a loss for why not.
Can anyone shed some light on what I'm missing as to why my Class-specific CSS isn't working?
Question
Question
Modern Forms - Collection Hide Add Link - CSS issue
Replies
For those curious about how I made a collection operate off a radio field rather than adds/remove buttons, here's the JavaScript I wrote for it...
LFForm.onFieldChange(function() { changeProjectRows();}, {fieldId: 44});
function changeProjectRows()
{
var selectedRows = Number(LFForm.getFieldValues({fieldId: 44}).value);
var currentRows = LFForm.getFieldValues({fieldId: 51});
console.log("Changing Rows, current is "+currentRows+" and setting to "+selectedRows+".");
if (currentRows > selectedRows)
{
var removeCount = currentRows - selectedRows;
console.log("Removing "+removeCount+" rows.");
while (currentRows != selectedRows)
{
currentRows = currentRows-1;
// Removes the last Row from the Collection.
LFForm.deleteRow({variableName: "Project"}, currentRows);
}
}
else if (currentRows < selectedRows)
{
var addCount = selectedRows - currentRows;
console.log("Adding "+addCount+" rows.");
// Add x Rows to the collection
LFForm.addRow({variableName: "Project"}, addCount);
}
}
FieldId 44 is the Radio button with options 1 through 5 however getting the field value of a radio button returns an object which you then need to get the value of, which for a radio button will be a string, so Number(LFForm.getFieldValues({fieldId: 44}).value) gets the value of the Radio button as a number.
FieldId 51 is a Number field which was set up with a calculation for =Max(<Collection.RowCount>) where RowCount is a number field in the collection set to be calculated as =Row()
The collection was named "Project" and was refenced by variable name rather than id.
Whenever the Radio button changes, it calls the function to compare current number of rows to the number it should change to, if it needs to reduce rows it deleted the last row until it has the correct number, if it needs to add rows it just adds the number of rows it needs to.