I am using two ngx-bootstrap datepickers side by side in an Angular 8 project. In mobile view, both the datepickers are going out of the viewport as shown below. What do I do to position both the datepickers in the centre of the mobile screen?I am getting this output
But I need this output for both the datepickers. I can achieve this output if I put left: 23% as already position: absolute is assigned for the datepicker. But It changes the position of both the datepickers. I want both the datepickers to be placed in the centre of the screen. These are the styles that are already present in the datepicker by default: display: block; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-42px, 149px, 0px); z-index: 1080;
How do I customize the position of ngx-bootstrap datepicker for mobile view?
1.8k Views Asked by Dhritiman Tamuli Saikia At
1
There are 1 best solutions below
Related Questions in CSS
- CSS Class is not applying to element (border width,color,and style attributes)
- How do I find the fonts that are not loading in a CORS situation ( MoovWeb )?
- Positioning child at bottom of parent with scroll
- Play multiple audio files in a slider
- How to set text over image?
- Website zoomed out on Android default browser
- Writing/Overwriting to specific XML file from ASP.NET code behind
- My navbar is not expanding after collapse
- when a checkbox is checked how to display a different hidden element using javascript
- Gaps Vertically Using Dividers
- CSS: Preventing a property to affect on element until the end of transition
- Polygon Button with pure CSS
- transform-origin doesnt apply in safari
- show/hide multiple div tags at once and change the size of the remaining div tag
- Mask the image/maps/div (circle) using css and jquery
Related Questions in ANGULAR
- Is it possible to use ES5 JavaScript with Angular 2 instead of TypeScript?
- Module '"angular2/angular2"' has no exported member 'For'
- import syntax in typescript creating another js file in visual studio
- Separate ts file for imports
- How to use an AngularJS 2 component multiple times in the same page?
- injectables not working in angular 2.0 latest build 26
- Does angular2 bootstrap have a way to dynamically target elements like it does in angular 1.x
- Import {} from location is not found in VS Code using TypeScript and Angular 2
- Angular 2/Typescript: require not found
- ng-switch in Angular2
- Angular 2 import issue: "Zone already exported on window the object!"
- How to make FileReader work with Angular2?
- Writing the most basic Unit test in Angular 2?
- Angular2: Creating child components programmatically
- AngularJS - TypeError: Cannot read property 'canonicalUrl' of undefined
Related Questions in DATEPICKER
- Uncaught TypeError: undefined is not a function
- Bootstrap Datepicker not displaying correctly
- Struts2 jqGrid DatePicker in Column Filter
- Trying to figure out how to strip holidays from jquery datepicker
- how to setText from value of DatePickerDialog
- google calender library disable Previous date
- Datepicker is automatically disappearing
- Laravel 5 validate date as php Y format e.g 2015?
- Using Bootstrap Datepicker Internationally
- Appium: Change Android DatePicker value Javascript/NodeJS
- Sort by ascending date PHP array with Advanced Custom Fields
- Embedded Bootstrap Datepicker Will Not Persist
- Increase range of date options in jquery UI datepicker
- How to change date format in HTML5
- I want to change date-picker format as yyyy-mm-dd
Related Questions in ANGULAR8
- Angular Navigate Routing between parent and child
- Data not displayed unless manual page refresh Angular 8
- Angular 8 - how to invoke global method?
- Error: InvalidPipeArgument: 'Unable to convert "27-08-2020" into a date' for pipe 'DatePipe'
- Angular 8 and Okta logout not working as user is redirected inside the app
- Select dropdown shows blank when NG model is null
- Open a word document file in web based ms office using Angular application
- okta and angular 8 authentication
- How to test ElementRef in Angular 8
- button disabled not working properly angular
- Angular 8 Injectable Globals does not maintain value
- How to validation a url inside a quill editor link
- How we can fetch route parameters in lazily loaded module in Angular
- How to pass a string from HTML to the Component on Angular 8 using (click) function?
- Angular 8 ngForm not performing action
Related Questions in NGX-BOOTSTRAP
- ngx-bootstrap modal - access data passed into modal via bsModalRef.content
- How to get response 'yes' or 'no' using ngx-bootstrap modal
- Ngx Bootstrap Template Modal Destroyed / Removed From Dom When Hidden
- How to delay the ngx-bootstrap tooltip?
- ngx-bootstrap tooltip not showing up in angular2
- What is the correct way to use ngx-bootstrap datepicker?
- "Angular powered bootstrap" is "ngx-bootstrap"?
- Display popover with contents specific to the image clicked from a list of images displayed
- ngx bootstrap popover move the html string creation to HTML template file
- ngx bootstrap popoverTitle render as HTML
- ngx-bootstrap typeahead not showing dropdown
- ngx-bootstrap accordion open panel dynamically
- How to change the date format in the datepicker of Angular ngx-bootstrap inside a form
- isDevMode / enableProdMode error :Cannot enable prod mode after platform setup
- Angular 4 / ngx-bootstrap BsModalService with Dynamic Injection
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
In styles.css, put these styles...
bs-datepicker-container{ transform: scale(1,1) !important; top: 118px !important; left: 0 !important; right: 0 !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }In place of the top: 118px !important, put your position accordingly.