Updating the appearance of the time picker within the primeng calendar

I am attempting to remove the padding and adjust the font style to be smaller in the time-picker component of primeng calendar for Angular 7.

<p-calendar [ngModel]="xxx" timeOnly="true" [(hourFormat)]="hourFormat" [(dateFormat)]="timeFormat" [showIcon]="false"
  [style]="{'display':'initial'}" [inputStyle]="{'border-width':'1px 1px 1px 1px', 'width':'100%','height':'25px'}"></p-calendar>

However, I am encountering difficulties in applying these changes.

https://i.sstatic.net/Tpoqm.png

This is the CSS class applied to the rendered box:

class="ui-timepicker ui-widget-header ui-corner-all ng-tns-c9-1 ng-star-inserted"

I have tried using the following CSS selectors:

::ng-deep .ui-timepicker .ui-widget-header{
padding:initial;
font-size:smaller;
}

and

::ng-deep .ui-timepicker.ui-widget-header{
padding:initial;
font-size:smaller;
}

Unfortunately, these attempts have been unsuccessful. Any suggestions or guidance would be greatly appreciated. Thank you.

cssangularprimengprimeng-calendar

Answer №1

::ng-deep .ui-timepicker.ui-widget-header{
  padding:initial;
  font-size:smaller;
}

The code above successfully reduces the font size, but the padding remains unchanged due to a higher specificity defined in Primeng's CSS:

body .ui-datepicker .ui-timepicker {
    border: 0 none;
    border-top: 1px solid #d8dae2;
    padding: 0.857em;
}

To override this and modify the padding, you can increase the specificity of your style like so:

::ng-deep div.ui-datepicker .ui-timepicker{
  padding:initial;
  font-size:smaller;
}

Check out the Stackblitz demo for an example.

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

Retrieving a string value from a child route in Angular 2

Looking to set the header title from a child route view... In the parent component: @Component({ selector: 'parent-component', template: ` <header>{{headerTitle}}</header> <router-outlet></router-outlet ...

angularangular2-routing

Styling Tip: Removing a header from the initial page of a chapter using CSS

Using CSS to generate HTML to PDF, I have successfully added page numbers at the bottom and chapter names at the top of each page using @top-center in the CSS and HTML code below. The rendering is done with Prince. However, I need a way to exclude the hea ...

htmlcsspdfpdf-generation

Personalized CSS for Modifying Highlight Color of Main Menu when Selected on WEN Associate Theme

I am currently working on customizing the appearance of my website's main menu. Specifically, I want to modify the small highlighted bar that appears under the selected item to better align with our brand colors. The default color in the WEN Associate ...

csswordpress-theming

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

Sending data to Firebase Storage with AngularFire2

I've been working on a project involving Angular2 and Firebase, aiming to upload images to Firebase Storage. In order to achieve this, I created the Component with the constructor, function, and template. However, I am unsure about the correct way to ...

javascriptangularfirebasefirebase-storageangularfire2

Encountering difficulties posting an image with Ionic2/3 Social Share

Here, I am utilizing the Ionic social share feature to initially share an image. To achieve this, I am extracting the image using Canvas and then exporting the same image code to the share plugin. Upon doing this, the following data appears in my email bod ...

angularionic-frameworkionic2ionic3

Angular - Execute function every 30 seconds while considering the duration of the function execution

In my Angular 7 application, I am utilizing RxJS to handle asynchronous operations. My goal is to retrieve a list of items from an API endpoint every 30 seconds. However, there are times when the request may take longer than expected, and I want to ensure ...

javascriptangulartypescriptrxjs

I am looking to dynamically assign CSS classes to elements in my HTML document. Additionally, my project utilizes Angular 5 and Bootstrap version 3.3.7

I am currently in the process of generating a table using data obtained from a JSON. Due to the potential for a large amount of data, I have implemented a loop to create all the rows within the table. My goal is to enable users to click on any specific row ...

htmlcssangulartwitter-bootstrap-3

`Angular project not responding to HTML mouse click event`

I am a beginner with the Angular framework and currently experimenting with creating a basic button in the app.components.html file. My goal is to have this button trigger a function declared in the app.component.ts file. Initially, I used the (click) even ...

javascripthtmlangular

Concealing a navigation tab with Angular4 in Typescript: A tutorial

I have successfully implemented 3 tabs in my Angular 4 project. At the moment, I am focusing on working with the first two tabs and planning to tackle the third tab in the near future. To keep things clean and organized, I am looking to use JavaScript/Typ ...

javascriptangulartypescript

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

jquerycsshtml

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

htmlcsstwitter-bootstrapbootstrap-5

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...

htmlcss

Difficulty achieving transformation of one div element within another div element

My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg I tried stacking the text and button in separate divs and triggering the ...

htmlcsstransform

The sticky navigation bar is not returning when scrolling up, and the function to remove the class is not working properly

After implementing a navigation bar that works on scroll down, I ran into an issue where it doesn't stop at the original position on scroll up. Despite finding a similar post addressing this problem, I struggled to apply the solution correctly due to ...

jquerycssscrollnavbarnav

Utilize ngFor to invoke a unique custom function during every iteration

I am looking to set up a feature similar to this: <div *ngFor="let callLog of callLogs; trackBy: trackByFn; let contact = getContact(callLog.user-id);" class="call-log-item"> ... <div> {{ contact ? contact.name : callLog.cache-name } ...

angular

Occasionally, angulafire2's getDownloadURL() function may fail to work with Angular. Could this be due to asynchronous processes?

Receive a 404 error when trying to access . Firebase is reporting a download link error with the following message: "Firebase Storage: Object 'hw04.docx' does not exist." Below is the code snippet related to this issue. upload(event) { cons ...

angularfirebasefirebase-storageangularfire2

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

A guide on implementing radio buttons in Angular 2 and sending the selected value via a HTTP post request

As a newcomer to Angular 2, I am struggling with the following code: Here is my HTML <form action="POST" (submit)="register()" class="aa-login-form"> <input type="radio" [(ngModel)]="gender" name="sex" value="MALE"> Male <input ...

htmltypescriptangularradio-button