How to apply same custom css to multiple scenes?

API & Customization Ask Developers
1

Hello more experiences coders…I have a custom css that I am applying to multiple scenes through javascript…how can I revise the following code to apply to multiple scenes rather than just the one?

$(document).on(‘knack-scene-render.scene_1193’, function(event, view, data) {
$(“#kn-scene_1193”, “”).each(function() {
$(this).css({“width”:“80%”, “margin”:“auto”});
})
});

Thanks in advance!

2

Hi @Leah

I would suggest you use CSS and a span in any description in a view on the scene.

CSS

.kn-scene:has(.scene-width-80) {
     width: 80%;
     margin: auto;
}

In the description on any one view in the scene you wish to target put:

<span class='scene-width-80'></span>

If you still like to use jQuery

$(document).on('knack-scene-render.any', function (event, scene){
       const scenesForWidth = [scene_1193, scene_123, scene_456];

for (const sceneId of scenesForWidth) {
      const $scene = $(`#kn-${sceneId)`);
      if ( $scene.length > 0) {
              $scene.css({'width': '80%', 'margin': 'auto'});
      }
 }
});

Feel free to use your own names for the consts. If you need any further help please ask.

Hope this helps.

Craig

1 Like
3

Thank you! I’ve tried both methods but they do not want to work. Could you take a peek at this test page?

It does appear that the sceneId on the following line was missing a close bracket so I fixed that but I still can’t get it to work:

const $scene = $(#kn-${sceneId));

Any thoughts? I have applied the jquery to the test page referenced above.

4

Try this sorry I wrote it on my mobile:

$(`#kn-${sceneId}`)

If that doesn’t work I’ll be more than happy to take a look.

Craig

5

That’s what I noticed and made that change…it did not work. : (

6

Hi Leah

I’ll take a look and get back to you.

Craig

7

Hi Leah
I can see the class scene-width-80 but I can’t see the styles, can you please copy/paste the css you tried.

Can you please copy/paste the JavaScript you tried.

Craig

8

Hi @Leah

I’m sorry but this is my mistake:

//STUDENT PORTAL, make pages 80% width and center on screen
$(document).on('knack-scene-render.any', function (event, scene){
       const scenesForWidth = ['scene_1193', 'scene_1197', 'scene_1195', 'scene_1262', 'scene_1279']; 
 //scene keys must be strings

for (const sceneId of scenesForWidth) {
      const $scene = $("#kn-${sceneId}");
      if ( $scene.length > 0) {
              $scene.css({"width": "80%", "margin": "auto"});
      }
 }
});

The scene keys must be strings. I can only apologise.
Craig

9

I never got this to work. I tried both the jquery option and the span class with the CSS, what did end up working was adding the following CSS:

#kn-scene_1230.kn-scene.kn-container.group-layout-wrapper,
#kn-scene_1195.kn-scene.kn-container.group-layout-wrapper,
#kn-scene_1200.kn-scene.kn-container.group-layout-wrapper {
width: 80%;
margin: auto !important;
}

it does get repetitive as I add multiple pages to this section of the database (student facing vs staff facing). I was really hoping your other options would work but I never got them to. Not sure what I was doing wrong but my workaround is doing the job.

10

Hi Leah

If you could post the code you tried and the CSS you tried I’ll be more than happy to take a look. We use both cases throughout our app.

Craig