I noticed one strange thing today… I’m using Bootstrap in my custom XBlock. I added cdn for Bootsrap using add_css_with_url() method of fragment. But it is getting applied to whole page. Is this a normal behavior or am I missing out on something?
P.S. I even tried putting css cdn as link tag in HTML file still same result.
1 Like
I think if you use the “new learner experience”, frontend-app-learning, that the XBlocks will render in an IFrame and the styles will be scoped to the current XBlock or maybe the whole unit. But otherwise, yes, that’s expected. The platform traditionally has not had any strong separation between the LMS UI and the XBlock UI, so if you import a stylesheet with unscoped/global styles, it’s going to affect the whole page. Many of us hope to improve this in the future.
However, you may not need to import bootstrap anyways - the edx-platform already includes bootstrap so you should find that styles like class="btn btn-primary" already work and are themed to match the edX colors.
If you really need to import the whole bootstrap styles (e.g. you want another version), you could try using this approach, but it could cause issues with two conflicting versions of bootstrap on the page.
1 Like
To answer from a more general viewpoint than just Bootstrap: Namespace your CSS. Be more specific with the targeting and you won’t have to worry about it affecting the whole page.
Also, if anyone’s going to change the “one xblock can affect the whole page” thing, please don’t. That’s expected behavior at this point; if it goes away we’ll have to rewrite entire courses.
@colin.fredericks Perhaps we can implement an option to turn that off on a course-by-course or unit-by-unit basis if needed; in general I feel there are a lot of good reasons to make XBlocks more isolated.
Do said courses work on mobile? I thought the mobile app already limited its display to one XBlock at a time.
@braden All of it works on mobile browsers. Some of the functionality works on the mobile app and some doesn’t. My understanding of edX’s future plans was that the app was going to get less attention, since a fair number of more complex blocks already don’t work on it, but I could easily be wrong about that - we’re often left guessing when it comes to strategy.
I definitely agree that having XBlocks be more isolated would be nice. Turning that off seems like it could lead to a real mess in situations with content reuse - you’d want as much uniformity as possible.
If there were some way to attach a script and style sheet to a unit (page) rather than to a particular block, that would be wonderful. Ditto for subsections and sections and whole courses. That idea was on our wish list for so long that we eventually gave up on it and went with our current approach.
Here are some of the things that currently reach from one component to another:
- General page styling from HX-JS’s stylesheet.
- Video-related scripts, which pop up questions while a video runs, or add clickable links to it (both also HX-JS), or grade someone based on watch time.
- Our rich-text-editor grader for reasons I completely do not understand. (The editor itself works fine in an HTML block but not in a problem block, so the JS has to reach out and find the editor.)
- The learner backpack (works via an iframe appended to <body>).
Also: not only do we lose those things if javascript and css can’t reach between blocks, we end up having to load scripts and css multiple times on the same page, which seems non-optimal for load and bandwidth (though maybe caching fixes more of that than I would think).
Thanks so much, very helpful to know! I don’t know if I will personally be involved in working on these things but if I do, I’ll keep this in mind.
That sounds like the best solution to me, and makes a lot more sense than letting XBlocks do anything they want to the whole page 