I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext {
    border: 1px solid black;
    background: #eeeeee;
    text-align: center !important;
}

The content is not properly centered.

          <p-calendar dateFormat="mm/dd/yy" dateMask autoUnmask="true"
          [ngClass]="{'ng-invalid ng-dirty':f['tdate']?.errors &&f['tdate']?.touched}"
          formControlName="tdate" id="tdate" class="date " placeholder="mm/dd/yyyy"
          name="tdate" [(ngModel)]="dateModel" 
          [disabled]="isDisabled"              
          ></p-calendar>

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

cssangularprimengng-deep

Answer №1

Your .scss code snippet:

:host ::ng-deep {
  .date {
    .p-inputtext {
      text-align: center;
    }
  }
}

Snippet for your component:

 <p-calendar dateFormat="mm/dd/yy" dateMask autoUnmask="true"
          [ngClass]="{'ng-invalid ng-dirty':f['tdate']?.errors &&f['tdate']?.touched}"
          formControlName="tdate" id="tdate" class="date" placeholder="mm/dd/yyyy"
          name="tdate" [(ngModel)]="dateModel" 
          [disabled]="isDisabled"              
          ></p-calendar>

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

Stopping HTTP client calls in OnDestroy hook of an Angular Service

Is it possible to automatically unsubscribe from an http call in an Angular service using the ngOnDestroy hook? Just to note, I am already familiar with using the rxjs 'take' operator or manually unsubscribing from the service within the compone ...

javascriptangulartypescriptrxjsangular-material

Order of execution for Angular 2 components

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {Router, ActivatedRoute, Params} from '@angular/router'; import { Country } from &ap ...

javascriptangulartypescript

Transmit a form containing a downloaded file through an HTTP request

I am facing an issue with sending an email form and an input file to my server. Despite no errors in the console, I can't seem to upload the file correctly as an attachment in the email. post(f: NgForm) { const email = f.value; const headers = ...

angulartypescriptcontent-type

What benefits does WebSocketSubject offer?

New to the world of web development, so please be patient with me... Current tech stack: Angular frontend, Tornado (Python-based) web server for the backend I've been successfully utilizing RxJs and WebSocket to communicate with the backend, followi ...

angularwebsocketrxjs

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Is there a way to hide the horizontal lines and timeslots in the table below without affecting the vertical lines? I attempted to use the visibility property on the td elements, but it hides both sets of lines. Any suggestions on how to resolve this is ...

htmlcssreactjsmaterial-ui

Fully conceal a DIV while the webpage is loading

Following the header, I've implemented a hidden div with a height transition that can be activated by a button. However, there seems to be an issue where the browser displays the content of the div while the page is loading and then hides it afterward ...

jqueryhtmlcss

Discovering the Best Way to Display Node.js API Errors in an Angular Application

When encountering an error in my Node.js application, I handle it like so: app.get('/api/login', (req, res, next) => { //... return res.status(400).send({ isSuccess: false, errors: ["error 1", "error 2"] }) }) Now ...

node.jsangularangular-httpclient

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar

Testing Angular application using Cypress.io with a Google Login popup window

Has anyone experienced difficulties logging into a Google account using Cypress.io and the Google authentication pop-up window? Although I am able to open the window, Cypress is unable to locate the ID for the email input field. The specific error messag ...

angularcypressangular-test

Retrieving an array of objects from a JSON file using Angular 2

I am encountering an issue where the class is not filled properly in an object obtained from a JSON array, resulting in an 'undefined' error. Here is the code snippet for retrieving the object: getFeatures() { return this.http.get('h ...

jsonhttpangulargetjson

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

javascriptjqueryangularqueryselector

Matching the heights of child elements in different block elements using CSS (flex/grid)

Hey there! I need some help with a markup issue. I want to replicate the layout shown in this picture. The challenge is ensuring that the grey line between the upper and lower sections of cards on the same row are aligned perfectly. In the image, you can s ...

htmlcssflexboxcss-grid

Is it possible to animate share buttons using Framer Motion but staggering siblings?

I have a Share Icon that looks like: I'm looking to display the first 5 icons, with the 5th icon being the share icon. The remaining icons should appear below the share icon and expand to the right when someone taps or hovers over it (either tap or h ...

javascriptcssreactjsnext.jsframer-motion

Adjust padding of radio button labels in Qualtrics for a cleaner, more streamlined appearance

As I delve into the world of CSS, my goal is to customize the existing survey theme known as "Minimal 2014". Specifically, my focus is on minimizing the spacing in various areas to create a more compact design. So far, I've successfully reduced the g ...

cssqualtrics

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

Applying the CSS property overflow-x: hidden will prevent horizontal overflow and only display

When I set overflow-x: hidden on an element that overflows both horizontally and vertically, it displays a vertical scroll bar along with hiding the horizontal overflow. I attempted adding overflow-y: visible and just overflow: visible, but it had no effec ...

htmlcss

Fixing a compare function problem in Angular 6 mat-select

Being currently engrossed in an angular 6 project, I find myself grappling with a mat-select element that necessitates the use of the compareWith function due to my selection of objects. Curiously enough, even when I refrain from selecting any option, it ...

angularangular-material

What is the name of the scrolling header effect achieved in the following?

I've been seeing a lot of people using a unique header effect lately and I'm curious to learn more about how it's done. Can anyone explain the process behind achieving this effect, what it's called, and if there are any good tutorials a ...

javascriptjquerycss

Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Looking to convert a dynamic JSON structure into a tree node: { "video": { "width": 1920, "height": 1080, "video_codec": "H264", "CBR": "4337025", "frame_rate& ...

javascriptarraysjsonangulartypescript