Issues with the Bootstrap Datetimepicker span breaking animation

I'm experiencing issues with the Bootstrap 3 Datepicker v4 as something seems to be breaking and I can't seem to fix it. My guess is that the input is causing a CSS issue.

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

RESULT:

Is there a specific property I need to adjust in order to eliminate the margin between the span element and the input field?

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

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

I attempted to replicate the issue using Bootply, but was unsuccessful.

You can try adjusting the width of the div, for example:

<div class='input-group date' id='datetimepicker1' style="width: 90%" <!-- You can adjust this based on your preference -->>
    <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>

Please let me know if this solves the issue!

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

Issue with IE 8 compatibility and jquery

Here is the setup of my div: <div class="container"> <div id="myid" style="display:hidden;"> <p>some stuff here</p></div> </div> When I run the command $("myid").slideToggle("slow"); on the above html code (where " ...

jqueryhtmlcss

"Enhance your Magento store with the ability to showcase multiple configurable products on the category page, even when dropdown values are not

As I work on adding multiple configurable products to a category list page in Magento 1.7.2, I am facing some challenges due to using the Organic Internet SCP extension and EM Gala Colorswatches. While following tutorials from various sources like Inchoo a ...

javascriptphpmagentocategoriesconfigurable-product

The responsiveness of Bootstrap 4's col with col-sm-12 is questionable

Using Bootstrap 4, I have set up my website with 4 columns in 1 row. However, when viewing on mobile devices, I want the 4 columns to stack vertically instead of horizontally (essentially creating a new row for each column). I thought that adding col-sm-1 ...

twitter-bootstrapbootstrap-4

Organizing Data Tables Based on Selected Rows

I am working with a datatable that includes a table with checkboxes in the first column. I am trying to figure out how to sort the table so that when a checkbox is checked, the corresponding row will move to the top of the table. <table class="table ...

jqueryhtmlcheckboxdatatables

What is the process for extracting dates in JavaScript?

I need help extracting the proper date value from a long date string. Here is the initial date: Sun Aug 30 2020 00:00:00 GMT+0200 (Central European Summer Time) How can I parse this date to: 2020-08-30? Additionally, I have another scenario: Tue Aug 25 ...

javascripttypescript

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

I am facing an issue with an element in my code, which is as follows: <a ng-click="vm.openPage(page)">{{page.pageId}}</a> Within the vm.openPage() function, there are validations that need to be performed before redirecting to the page refere ...

javascripthtmlangularjs

Leveraging a node.js file monitoring tool in tandem with JetBrains WebStorm

For the past few weeks, I've been incorporating Prettier into my project workflow and I must say, it's really impressive! Working with JetBrains WebStorm as my preferred IDE, I followed the guidelines provided on the Prettier project site to set ...

javascriptnode.jsnpmwebstormprettier

Tips for safeguarding AJAX or javascript-based web applications

Utilizing AJAX, this function retrieves information about an image in the database with the ID of 219 when a button is clicked. Any visitor to this webpage has the ability to alter the JavaScript code by inspecting the source code. By modifying the code a ...

javascriptajaxcode-injectionwebsecurityclient-side-attacks

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

javascriptangularlifecycleeventemitter

Tips for ensuring the security of your code in node.js

Here is a snippet from my app.js that deals with managing connections: var connections = []; function removeConnection(res) { var i = connections.indexOf(res); if (i !== -1) { connections.splice(i, 1); } } I make a call to removeConn ...

javascriptmultithreadingnode.js

node-fetch fails to catch HTTP errors

I am encountering issues with handling fetch exceptions in Node.js What I am anticipating to occur is: An HTTP error happening within my fetch call The CheckResponseStatus function running and throwing an error with the server error status and text This e ...

javascriptnode.jsexceptionpromise

applying attributes to an element

Can you tell me why the addClass method is adding the class 'foo' to both the div and p element in the code snippet below? $('<div/>').after('<p></p>').addClass('foo') .filter('p').attr ...

javascriptjquery

Webdriver: Halting loop upon meeting specified condition

I am attempting to hover over each seat and click on the available seat. However, I am encountering an issue where the web element loop is not being broken once an available seat is found. The program hovers over some seats but never actually clicks on any ...

javahtmlselenium-webdriver

Filter table rows based on user input

Despite my efforts in researching other SO questions on this topic, I am still unable to find a solution for my specific case. I have a table with multiple rows and an input control above it that needs to filter based on the user's input. Each row als ...

jqueryfilter

Launch the game within the gaming application

I am looking to incorporate a game within another game... Here's what I mean: Open the app: Pandachii Next, navigate to the 4th button (game pad). When we click on the game icon, I want to launch another game (located below the Pandachii window - c ...

javascriptandroidhtmlphaser-framework

Create personalized styles for each item within a stack with specific spacing using the @mui library

Is there a way to change both the background color and spacing area when hovering over each item in my list? https://i.stack.imgur.com/87TST.png <Stack spacing={4} divider={<Divider variant={`fullWidth`} orientation={`horizontal`} flexItem/>}> ...

javascripthtmlcssreactjsmaterial-ui

Text will split into two at a later time

I am using the material-ui library. Curious about adding a text followed by a line divider. Here's how I attempted it: <Grid> <Typography variant="h6" color="primary"> {'text'} </Typograph ...

javascriptreactjsmaterial-ui

The mobile homepage is experiencing issues with its two scrollbars - one large and one small - they do not seem to

The issue I am facing is not easily reproducible as I have a large amount of code to sift through and pinpoint the exact problem. My hope is to receive suggestions or insights into what might be causing the problem so that I can further troubleshoot from ...

jquerymobilescrollbarresponsivefullpage.js

Is it better to store data individually in localStorage or combine it into one big string?

When it comes to keeping track of multiple tallies in localStorage, one question arises: Is it more efficient to store and retrieve several small data points individually or as one larger chunk? For example: localStorage.setItem('id1', tally1); ...

javascriptcordovatypescriptlocal-storageionic2

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

csscss-grid