Vue calendar - The month display is condensed to only one row

Currently, I am incorporating bootstrap-datetimepicker for Vue (found at https://www.npmjs.com/package/vue-bootstrap-datetimepicker) via CDN. The date display looks good, however there is an issue with the month view size when selecting a month.

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

This is the code snippet in question:

<datetime-picker v-model="checked_in_time" class="size_datetime_picker"
                             :config="{
                                format: 'YYYY-MM-DD HH:mm:ss',
                                widgetPositioning: {horizontal: 'auto', vertical: 'top'},
                                showClear: true,
                                useCurrent: false
                             }"
                             name="checked_in_time"></datetime-picker>

I have chosen to import the file through CDN. Any advice on how to troubleshoot this issue would be greatly appreciated.

cssdatetimevue.jsdatetimepickerbootstrap-datetimepicker

Answer №1

If you are using bootstrap, it is important to maintain a good class order of "container" > "row" > "col-md-12" (or similar) for proper alignment. Once this is set up correctly, you can proceed with the following steps.

Consider replacing your object in ":config" with an object named "options" from the "data". Here is an example:

 data: {
    date: null,
    options: {
      widgetPositioning: {horizontal: 'auto', vertical: 'top'},
      format: 'DD/MM/YYYY h:mm:ss',
      useCurrent: false,
      showClear: true,
      showClose: true,
    }
  },
<date-picker name="date" v-model="date" :config="options"></date-picker>

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

Is there a jQuery or Javascript alternative to CSS Counter?

Can a counter be implemented that changes the text of a tag directly using jQuery/Javascript? For example, if there were two tags like this: <a>hello</a> <a>bye</a> After executing the jQuery/JS function, the result would be: < ...

javascriptjqueryhtmlcss

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...

jqueryhtmlcssajax

Guide to transferring a calculated outcome to a parameter in vue2.js

Is it possible to pass a computed result as a parameter in Vue.js? <el-input v-model="ruleForm.volexp"/>{{ calVol }} = {{ ruleForm.vol }} data() { return { ruleForm: { volexp: '', vol: 0 } } }, computed: { calVol: function() { ...

vue.jsvuejs2vue-component

Creating a form with an input field and an image side by side in HTML

I've been attempting to display an HTML input element and an SVG image on the same line without success. I've tried various solutions from stackoverflow, but none seem to work for me. Here's my current HTML code: <div id = "inline_eleme ...

htmlcsssvg

TokenMismatchException is encountered while making an Ajax POST request in Vue-Resource

Just a heads up, I'm working with the Laravel framework. I've already checked similar questions on SO, but couldn't find a solution that worked for me... Even though I believe I've set my CSRF token correctly, it's still not funct ...

ajaxlaravellaravel-5vue.jsvue-resource

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

javascriptjqueryhtmlcsshighcharts

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

javascriptjqueryhtmlcsswordpress

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

javascriptjqueryhtmlcssdynamic-html

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Looking to update the icons by changing the class from .fa-plus to .fa-minus for this specific menu section <div class="accordion-menu"> <h2 class="accordion-header" id="subseccOne"> ...

javascripthtmlcssaccordionbootstrap-5

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

jquerycssinternet-explorer

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

Using a local API in conjunction with a Vue app hosted on a separate port: a guide

I am currently assisting with setting up a Django + Vue application for someone, and we are facing an issue regarding how to enable hot-reloading in the Vue app while also being able to communicate with the local Django server. In the production environme ...

pythondjangovue.jsvuejs2vue-cli

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

How can we display a banner after every third element using VUE.js?

Hey there! Can anyone assist me with creating a banner that shows up every 3-4 elements? ...

vue.js

Is there a disparity in how the mandatory field validator functions in Edge compared to Chrome?

There doesn't seem to be any red color How can I ensure consistency? Both elements should either have color or none at all. <form action=""> <input id="email" type="email" required="required" /> <input type="submit" id="btnS ...

htmlcssmicrosoft-edge

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

javascripthtmlcss

A guide to sending props to a CSS class in Vue 3

I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class. Component File: Toast.vue <script ...

javascriptcssvue.jsvuejs3bootstrap-5

Understanding the Behavior of Vue 3's setInterval Methods

Environment I am working on a Vue 3 Application where I need to run a constant setInterval() in the background (Game Loop). To achieve this, I have placed the code in store/index.js and invoked it from views/Playground.vue's mounted() lifecycle hook ...

javascriptvue.jsvuejs3

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular