I have a feature which allows users to create a window, this is dynamically scalable using CSS.
There are lots of lines of CSS, but for simplicity here is just one, this shows how the frame scales, the input has an ID attribute of ‘frame’ and the CSS does the sizing.
However, I am unable to display the users windows in a repeating group because there is only one CSS/HTML file, effectively only one window will display correctly because all saved windows share the same CSS ID attributes.
I can’t even take a screenshot and display those screenshots in a repeating group because, to my knowledge, there are no screenshot plugins which can handle bevel/shading.
Here’s an original image followed by a screenshot taken from Screenshot Element Pro showing strange artifacts.
So, I need to somehow make my CSS and the window’s ID attribute dynamic. I number each users saved window so in theory I should be able to associate a specific window with the CSS.
Does anyone have any suggestion how this could be done?
Haha, once I was shown the basic of CSS by @adamhholmes I was off to the races! I must say, the CSS has been amazing and allowed me to develop the app I wanted.
the ID attribute can also be dynamic, no? Couldn’t that help you?
Yes, but both the ID and the HTML file need to be dynamic, which I think they are - I am hopeful it can work but I don’t know what to reference, I mean it may be something like When This window's number is the same as the current Window … or something like that. I am going to try many ways to see if I can get it to work.
I’m not entirely sure I understand the question… but as @rico.trevisan points out, the elementID can also be dynamic…
So you can add a reference to the current cell’s index to the element ID, and then apply CSS independently to the element inside each RG cell…
If you have a variable number of cells, you can make the entire CSS dynamic, based on the RG’s list of things, using format as text, then create a different CSS rule for each item in the RG.
Thanks @adamhholmes I think this will be the solution because I do have a variable number of cells, ie. a user can create any number of windows.
I have just simplified the setup for troubleshooting, below I have two saved windows and a repeating group displaying the frame, notice the frame height/width is identical for both windows, which is incorrect;
So you would suggest I make the entire CSS dynamic? Could you point me in the right direction for how to do this? Would I be adding a condition to the main CSS box’s ID attributive (see below)?
Actually, on second thoughts, the way to do this will be simply to put the HTML element containing the CSS inside the RG cell (otherwise you won’t be able to refer to the input values)…
Then all you need to do is give each Window a unique ID attribute (based on the cell index), and refer to that unique ID Attribute in the CSS…
Awesome mate, this looks very promising but you have the RG data source set to ‘number’, but I think I need to set mine to WINDOW because I have to search for Windows?
That aside, I can’t seem to add Current cell's index to my ID (as you have below), the option isn’t there. I have added ListofNumbers A and my RG is of type ‘number’ with Data set to ListofNumbers A.
Ok, the issue is that I need to be searching for a type: Window but I only have ‘Parent group’s number’ available due to the data source being a number. hmmm, can you think of a workaorund for this? Instead of using Type: number, can I use the windowsID which I set when a window is created?
just use the cell index to identify the specific instance of the elements (you could use the thing’s unique ID, or any other unique identifier, but the current cell’s index is the simplest and cleanest)
@adamhholmes You are awesome mate! This worked and thank you again for the fast and high quality response.
I was able to use my windows unique ‘windowNumber’ which I associate with each window at point of creation so I was able to use this number in the ID Attribute, like A1Parent Group's Window's windowNumber
Then in the CSS I added the same extension, like #A1Parent Group's Window's windowNumber
