Bootstrap creates a small and calculated width for elements

Currently, I am integrating the react-datepicker plugin into my project alongside Bootstrap 3.

Upon implementation, I have noticed that the size of the datepicker on my website appears to be smaller than the examples provided in the plugin demos. It seems that the width and height are dynamically calculated during runtime. This resizing issue is attributed to Bootstrap - when I remove the Bootstrap .css file, the datepicker returns to its proper size.

  • What is causing this discrepancy?
  • How can I resolve this sizing dilemma?
  • Do you have any suggestions for an alternative datepicker plugin that offers more customization options?
csstwitter-bootstraptwitter-bootstrap-3react-datepicker

Answer №1

I came across that particular plugin.

The most straightforward solution I can think of is to specify the height and width directly in line with it.

Since none of its classes align with bootstrap, the issue likely stems from the size of the surrounding div causing it to appear smaller than intended.

Therefore, simply add 

style="height:200px; width:150px;
to it and it should function as expected.

(Verified)

Answer №2

It appears that the plugin is utilizing the rem unit for size calculations. This means it is referencing the root font size, which is typically 16px, but in the case of BS3, it is only 10px. Therefore, adding the line 

html { font-size: 16px !important; }
resolved the issue for me.

For more information, check out: https://github.com/Hacker0x01/react-datepicker/issues/624

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

Placing two images next to each other with accompanying captions

Currently working on developing a webpage, I am aiming to have two images in each row with captions positioned beneath them. The images are already configured as follows, I just require the captions: <div class = "container"> <img class = "pi ...

htmlcssimagerowcenter

show tab focus outline only

In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...

javascriptcssreactjs

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

htmlcss

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

What was the recommended dimensions for CSS containers in 2018?

In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px. ...

cssuser-interfaceresponsive-design

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...

javascriptjqueryhtmlcssforms

How to target child <div> elements within a parent <div> using jQuery

I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids. My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave th ...

javascriptjqueryhtmlcss

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

javascriptcssangularangular6

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

htmlcssscrapy

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

cssangular

Type of element returned

Is there a way to retrieve the element type? I'm interested in applying the style of a class to HTML5 elements without using the class attribute. <!DOCTYPE> <html> <head> <title>My page</title> </head& ...

javascriptjquerycsshtml

Menu with a carousel feature in between each item

I am experiencing an issue with a carousel embedded within a menu using Twitter Bootstrap. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="carousel slide" id="CarouselTest"> <div class="carousel-i ...

jquerycsstwitter-bootstrap

What is the most concise way to align one table row in the middle and another at the top?

Is there a way to align different rows in a table vertically with minimal code? I have a table with 3 rows, and I want the first two rows to be aligned vertically to the top, while the third row should be vertically aligned to the middle. If I try to def ...

htmlcss

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: The container css is set up like this: .experience-child { display: grid; grid-tem ...

htmlcsscss-grid

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

Change an ASP page into an image format such as JPEG or PNG

Seeking assistance to convert my classic ASP page containing label controls styled with positioning to images in JPG or PNG format, and then send them using CDO. Using Dreamweaver for this task. Any help would be greatly appreciated. ...

cssimageasp-classicdreamweaver

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

javascripthtmlcssgetboundingclientrect

Creating a visually appealing Django filter form with custom styling in HTML

Currently, this is how my django filter form appears: Below is the html code I am using: <form action="" method="get" class="form-inline"> {{myfilter.form|bootstrap}} <button class="btn btn-primary&q ...

pythonhtmlcssdjangoforms

Is it possible to have the background blurred, but only specifically behind the overlay?

How can I make the div appear as if it is blurring the background image of the page, even when the position of the div is changed? Also need to ensure it works seamlessly during window resizing. ...

css

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

javascriptjqueryhtmlcssbootstrap-4