It is not possible to alter the styles of the ng-daterangepicker Angular plugin

After installing the angular2 plugin "ng-daterangepicker", I attempted to resize a div within it by modifying the .sass file. However, despite clearing the cache, the changes did not reflect in my browser. It seems that I may need to make adjustments to .scss files instead, but I could not locate any within the plugin, only plain sass files.

.calendar-container
      display: inline-block
      width: 330px
      height: 100%
      padding: 20px
      border-right: 1px solid $border-light
      float: left

Even though I adjusted the width from 340px to 330px, the browser still showed it as 340px. To add to the confusion, deleting the .sass file did not affect the functionality, leading me to believe that the component's styles may be sourced from elsewhere.

cssangularnpmsass

Answer №1

It's generally not recommended to modify the source code of a plugin because any custom changes you make will be lost when you update the component or reinstall the project.

Instead, a better approach is to assign a CSS class to the directive like this:

<!-- app.component.html -->
<ng-daterangepicker class="myCustomDateRange" [(ngModel)]="value" [options]="options"></ng-daterangepicker>

Then, you can target the specific element and apply custom CSS to it in one of your SCSS files.

<!-- someStylesFile.scss -->
.myCustomDateRange .ng-daterangepicker .calendar .calendar-container { width: 330px; }

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

Tips for utilizing a particular field in a JSON object as the data origin while employing ng2-completer

As a newcomer to Angular and ng2 completer, I am working with an array of objects structured like this: var concepts = [ { id:, code:, concept:, display: } ............ ] The goal is to have the data source for auto suggest feature as the di ...

angularng2-completer

Comparing dates in Angular 6 can be done by using a simple

Just starting with angular 6, I have a task of comparing two date inputs and finding the greatest one. input 1 : 2018-12-29T00:00:00 input 2 : Mon Dec 31 2018 00:00:00 GMT+0530 (India Standard Time) The input 1 is retrieved from MSSQL database and the in ...

angulartypescriptangular6

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

javascriptcssmaven

Discovering the Angular HostBinding feature with parameter capabilities

Within my component, there is a numeric input that determines the width of the component. I need to dynamically set the width based on this input value using classes, as the width calculation relies on Sass variables that may change over time. I have thre ...

angularangular2-hostbinding

What is the best way to place a horizontal line behind buttons in a design?

Hello, I was experimenting with creating a background line behind the buttons on my webpage. Previously, I used an image for this purpose but now I want to achieve the same effect using a line. <div class="feedback-option"> <div class="radios2" ...

htmlcss

Unable to determine all parameters for Angular's DataService

I have been working on developing a versatile service and came across an informative article: https://medium.com/@krishna.acondy/a-generic-http-service-approach-for-angular-applications-a7bd8ff6a068 that guided me in creating my DataService. Here is a snip ...

angular

Does npm run use a separate version of TSC?

I am encountering an issue with my VS Code and Node.js project that uses Typescript. Within my package.json file's script block, there is an entry: "build-ts": "tsc" When I run simply tsc on the integrated terminal command line, the compilation proc ...

typescriptnpmvisual-studio-codenpm-run

The absence of underlines for <a href> and <u> is causing an issue

Below is a snippet of code that I am working with: echo "<form> <div id=\"error\"align=\"center\">"; echo "You've either entered the incorrect <b>username</b> or incorrect <b>passwor ...

htmlcss

Move a CSS div with animation to a specific fixed position

Is there a way to modify this code so that the ball moves to the right and remains in that position? http://codepen.io/chriscoyier/pen/pBCax You can experiment with the live version of the output by clicking on the link above. body { padding: 30px; } # ...

css

The jQuery remove function will only take effect on the second click following an AJAX request

I'm facing an issue with my jQuery code where two divs contain lists of links, triggering AJAX calls to append JSON data to a separate div. Upon clicking a link, the corresponding link div should hide. There's also a third div with the class "pan ...

javascriptjqueryhtmlcssajax

ngFor directive not iterating properly without any errors being displayed in the console

I reviewed numerous inquiries about issues with "ngFor not functioning properly". Here are the specifics. app.modules.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impo ...

angular

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...

javascripthtmlcss

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

htmlcsstwitter-bootstrapflexbox

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

htmlcssreactjsbootstrap-4

Issue encountered while attempting to initiate a new project with Angular CLI

Encountering an error while trying to create a new app using Angular CLI Attempted solutions: npm cache clean --force npm cache verify Unfortunately, the above steps did not resolve the issue Please refer to the image linked below https://i.sstatic.ne ...

node.jsangularnpmangular5

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

javascripthtmlcss

Add the scss file to the vuejs component npm package only if certain conditions specified in the project are met

Creating css/scss themes for my Vue Components Npm package has been a focus of mine lately. This particular package is local and currently being tested using npm link. Both the Package and Project are utilizing webpack. index.js of Package import "./src ...

javascriptvue.jsnpmwebpack

How can I design DIVs to resemble a radio station or television schedule grid?

Check out the JSFiddle for my page with the source code included: https://jsfiddle.net/g0kw1Le8/ Here is a snippet of the source code: <TITLE>Hallam FM - Best Variety of Hits</TITLE> <style> /* CSS styles go here */ /* End of CSS */ & ...

htmlcssdivide

The metro bundler is facing an unexpected glitch and is stuck in the terminal, failing to load

Recently, I've been using explo-cli to work on a react native project. Everything was running smoothly until today when I encountered an error stating that it couldn't find module './iter-step'. Before this, there was also an issue with ...

javascriptreact-nativenpmexpo

Unable to place a div below another div

I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...

htmlcss