Customizing CSS in apostrophe-cms Pro using TheAposPallete.vue

Just starting with apostrophe-pro and I've noticed a file named TheAposPallete.vue in the node_modules directory, located at

\node_modules@apostrophecms-pro\palette\ui\apos\components

This file contains the following CSS:

  .apos-palette__grouped.is-open .apos-palette__grouped__schema {
      max-height: 100vh;
   }

I'm experiencing some issues due to this CSS and have tried overriding it in my index.scss using the important flag, but it didn't work.

Is there a way to successfully override this CSS or is it not possible?

Answer №1

Successfully fixed the issue by modifying the entire route in index.scss

.apos-palette__grouped.is-open .apos-palette__grouped__schema{
   max-height: 120vh !important;
}

Answer №2

Inject your personal touch by applying inline CSS directly in the HTML code and ensuring it takes precedence with the !important declaration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenge: Unable to use import type with element-plus

As a newbie to vite, I have been encountering an issue that I can't seem to resolve despite my efforts in testing and researching on Google. Specifically, when importing the element-plus type in my vite app, such as ElInput... I keep getting this er ...

Create a new chart using completely unique information

I am currently working on implementing the example found at http://bl.ocks.org/mbostock/1093130. The goal is to have the "update" function redraw the graph with a completely different dataset each time a button on the DOM is pressed. I have made some modif ...

Unable to locate item by its identification number

Search for results in the index and return them. Method: async fetchIndex(req,res){ const userResults = await Usuario.find(); res.json(userResults); }, Route: routes.get('/api/usuarios', Usuario.fetchIndex); Having trouble ...

Disabling the 'fixed navigation bar' feature for mobile devices

Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...

How can I automatically assign a default local image if the image source in the JSON response is empty?

I am currently developing a Chrome extension where I want to display both images and text in the popup window. Everything seems to be working fine, however, when the JSON data for the image src is empty, I'm struggling to set a default image. Despite ...

Modifying an Object within a for-in loop

Hi there, I'm facing a challenge with updating an object that has child properties in my Angular application. Here is the initial object: $scope.osbStep = { test0Nav : { current : false, comp ...

Utilizing CodeIgniter for Efficient AJAX Posting

I'm struggling to submit a post using the ajax post method. It appears that the request is being posted without any error messages, but the model doesn't seem to respond and insert the row into the database. While I'm not well versed in jQu ...

What is the best way to extract data from a text file that contains multiple data entries separated by pipes (|) using the fs module?

I'm currently utilizing the node.js fs module to read a text file. One thing that I'm wondering is, does the fs module only support reading text files or can it handle other file formats as well? Now, my primary inquiry is if the text file conta ...

Unleashing the Power of Node.js: A Step-by-Step Guide to Crafting

I am developing a console interface that prompts the user with questions and receives input through the console. Some questions require the user to provide a limited number of inputs. I have researched ways to obtain console input in node js, but I haven&a ...

Unexpected behavior: Angular post request does not include the expected request body

Embarking on my initial solo Angular project... I am endeavoring to make a post request to my freshly created web service and have implemented the following code: headers = new HttpHeaders( {'Content-Type':'text/plain'} ); l ...

Learn how to effectively display checkboxes in an HTML form with Vue configuration

new Vue({ el: '...', data: { checkeditems: [] } }) <div v-for="item in instituteModel" v-if="instituteModel.length > 0"> <input type="checkbox" id="item.id" value="item.inst_name" v-model="checkeditems"/> </div&g ...

Is it possible for me to pass a reference to a specific object's instance function?

Can JavaScript allow you to pass a function reference to a specific object's function, similar to what can be done in Java? Let's take a look at this code snippet: _.every(aS, function (value) { return exp.test(value); }); What if we want ...

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

Navigate effortlessly with our vertical multi-level menu - simply hover over an option to reveal the next level of

This particular image demonstrates a vertical menu that is expanded. I am looking to display only the parent tag initially and upon hovering, show the next level and so forth. function display_children($parent, $level, $categoryModel) { $result = $ca ...

Error message: Can't find Highcharts in (React JS) environment

I have been encountering an error ReferenceError: Highcharts is not defined, and I've been struggling with this issue for a few days now. Can you provide assistance? In my project, I have Dashboard and Chart files where I import the Chart components ...

Processing of an array received via AJAX and passed to a PHP script, inside a separate function in a different file

I have a JavaScript array that I am sending via AJAX to a PHP file named aux.php. What I want is for this array to be visible and manipulable within a function inside a class in another PHP file called payments.php. I've provided all the code so they ...

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

What methods can be used to assess the security risks posed by a third-party library implemented in a React JS application?

How can I ensure the security of third-party libraries added to my create-react-app with additional scripts? ...

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

Mobile Size Setting

Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...