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
- How to use custom font during html to pdf conversion?
- Storing the preferred font-size in localStorage
- mp4 embedded videos within github pages website not loading
- Is there any way to glow this bulb image like a real light bulb
- What can I do to improve my coding on both html and css
- Uncaught TypeError: google.maps.LatLng is not a constructor at init (script.js:7:13)
- Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
- How to increase quality of mathjax output?
- Hover animation resetting( seemingly reverting back to original CSS and then again to hover)when moving mouse horizontaly accross a part of an element
- Storing selected language in localStorage
- How to clip grid cell and provide scroll as well?
- KeyboardAvoidingView makes a messy the flexbox
- Rotate an object around another object in javascript
- Understanding Scroll Anchoring Behavoir
- how to use only block layout in this css code?
Related Questions in ANGULAR
- Firebase link existing user to anonymous account?
- It doesnt always show all the books on my homepage
- Google adsense ads.txt status cannot be not found
- When I navigate to the URL'http://localhost:4200/', it redirects me back
- Ionic Angular Standalone ion-icon are not showing at all
- How to make Angular understand that view child is of a specific type, not a general ElementRef?
- vscode, debug angular, first time, doesn't debug, 2nd time stops at main.js then it's ok
- How to perform CRUD operations on a static JSON array in Angular? (without API)
- Ngrx props<>() method in createAction()
- How to animate rotation of an image inside input control?
- Detecting click inside and outside of the listening component in Angular
- Angular - type guard not narrowing types
- In node_modules file i am getting Angular genric error while using fontawesome in angular12
- Angular 16 sending null values to API
- GoogleCloud Error: Not Found The requested URL was not found on this server
Related Questions in DATEPICKER
- Prime React calendar : range and multiple mode support for Month and year Picker
- Enable the user to pick a date from Calender for non consecutive date only in ios?
- MUI DatePicker 6.19.7 change picked day bgcolor using sx
- Datepicker UI resets on error after form submission
- How to clear existing date value from a table cell with datepicker?
- c# Radzen datepicker throw error after render
- How to get a datepicker like in the official Contacts app?
- Flowbite datepicker z-index issue in modal
- Custom Range label in ng2-datepicker
- android material date picker is very slow
- @mui/x-date-pickers DatePicker Format Problem
- How to prevent dropdown closing on selecting date from mat datepicker
- MUI DatePicker bugging on Thinkpad
- Content Controls on macOS with different locale / language
- Date-picker in v-menu is not showing up (Vuetify)
Related Questions in ANGULAR8
- update angular 8 to 9
- How to manipulate Array of Object based on condition Angular 8
- <tbody> tag is removed after @swimlane/ngx-charts & @swimlane/ngx-graph version upgrade in Angular 8
- How to make Cancellable api calls in loop in Angular?
- Angular 8.3 - Child not rendered, instead parent is being rendered
- How to submit the formarray in angular in the given format?
- how to build Angular source code in local?
- how to download Angular8 source code and make a fix for it in local
- How should I add values in 2-level array format to a formGroup?
- Error in The target entry-point "ng2-slim-loading-bar" has missing dependencies: rxjs/Observable
- How to display half year based on year selection and disable half year for future years Angular 8
- How to display the year in the dropdown when July month starts
- Angular agDatePickerComponent not working on empty or blank ag grid cell
- How to add new input fields for lists and pass those data to dialog in angular 14
- Angular 8 creating a link between 2 separate variables
Related Questions in NGX-BOOTSTRAP
- How to change ngx datatable header background color?
- How can I install ngx-bootstrap in project Angular 17?
- Formly Repeated Section with length input
- ngx bootstrap issue inside a container with overflow and adaptivePosition: true
- how to customize ngxbootstrap daterangepicker?
- ngx-bootstrap dynamic resizing and wrap tooltip
- ngxbootstarp daterangepicker calenders not come on side by side come as top of another
- How to customize the theme in ngx-bootstrap?
- How to enable some dates which is disabled by the daysDisabled property in ngx-bootstrap?
- Type mismatch when passing component as variable to ngx-bootstrap modal service
- Could not find the project main file inside of the workspace config (src)
- How to create a standalone custom library that uses a non-stanalone third party library in Angular?
- Create multiple ngx-bootstrap Sortables with Angular
- Angular Standalone not Rendering in ngx-bootstrap/tabs
- ngx-bootstrap modal after update to 11 my backdropRef is undefined
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 # Hahtags
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.