Inline display malfunctioning

I am facing an issue while integrating ngTimepicker into my Angular project. It is functioning properly, but I am unable to inline the ngTimepicker inputs with the form input. Check out the plunker here

I would like this section of HTML to be displayed in a single line.

index.html

<form>
  <input type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>
javascripthtmlcssangularjs

Answer №1

To ensure your ng-timepicker directives work correctly, it is important to set display inline-block on them. This is necessary because the directive replaces itself with a template.

You can accomplish this by writing a CSS similar to the following;

ng-timepicker {
  display: inline-block;
}

Answer №2

 <!DOCTYPE html>
 <html lang="en">
 <head>
<title>Unique Timepicker Example</title>
  </head>
  <body ng-controller="TimeController as timeCtrl">

<ng-timepicker ng-model="timeCtrl.currentTime"></ng-timepicker>
{{ timeCtrl.currentTime }}

<ng-timepicker ng-model="timeCtrl.selectedTime" theme="blue" show-meridian="true"></ng-timepicker>
{{ timeCtrl.selectedTime }}

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <script type="text/javascript" src="src/js/ngTimepicker.min.js"></script>
 <script type="text/javascript">
 var app = angular.module('app', ['jkuri.timepicker']);
 app.controller('TimeController', [function() { 

 }]);
 </script>
 </body>
 </html>

Give this unique timepicker example a try!

Answer №3

Give this a shot:

CSS

.time-picker-container {
    display: inline-block;
}

Check out the updated demo

Answer №4

Check out this example I created using your code: plunker

I made a simple change to the css class:

.inline {
    display: inline-block;
}

Then, I applied the class to your ngTimepicker directives:

<form>
  <input class="inline" type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

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

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8

I have successfully implemented a tab menu that functions well in Chrome and IE 9,10. However, it does not seem to work in IE 7 or 8. I am at a loss regarding what changes need to be made to my code. Could anyone provide assistance? Link to Code Example ...

jquerycsscross-browser

React does not display the items enclosed within the map function

I am facing an issue with rendering elements from a map function. Despite trying to modify the return statement, I have not been able to resolve the issue. class API extends Component { myTop10Artists() { Api.getMyTopArtists(function (err, data) { ...

javascriptreactjs

Patience is key when using Selenium with Node.js - make sure to wait for the

Is there a way to ensure my code waits until the page is fully loaded in Node.js while using selenium-webdriver version 4.0.0? const driver = new Builder().forBrowser("firefox").build(); await driver.get("http://www.tsetmc.com/Loader.a ...

javascriptnode.jsseleniumselenium-webdriver

Tips for expanding frisby.js by adding new "expect" functionalities?

Looking to enhance the Frisby.js module with custom expect methods without altering the source code. These extensions are tailored for my REST API to streamline common tests into a single method. An issue arises as the Frisby.js module exports its methods ...

javascriptnode.jsinheritancejasmine-nodefrisby.js

Sending JSON-encoded data using HTML5 Server-Sent Events (SSE) is a

I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...

javascriptphpjsonhtml

Eliminate spaces within a string using JavaScript

In my quest for knowledge about trimming strings in JavaScript, I came across this intriguing discussion with a regex-based solution. After learning from the thread, I was under the assumption that trim would eliminate the space between "Hello" and "World ...

javascripthtmltrim

Updating a single component within a changing array of objects in React: Best practices

I've got a question regarding React rendering that I need help with. Before I dive into the explanation, here's the link to the relevant code sandbox: https://codesandbox.io/s/list-rerendering-y3iust?file=/src/App.js Here's the situation - ...

javascriptreactjsarraysobjectdom

Adding a variety of data types to a MongoDB collection through Node.js

I'm currently using the Sails web framework along with Node.js and MongoDB to develop my own website. I am encountering some challenges while attempting to add a new user and input values (of different types: Number, Array, Object) to my 'users&a ...

javascriptnode.jsmongodbpostmansails-mongo

The functionality of a Vue custom tooltip behaves strangely after clicking the button multiple times

I created this custom tooltip code that automatically closes after 2 seconds when a user clicks on a button, not just hovers over it. Initially, it works perfectly for the first two clicks, but then starts behaving strangely from the third click onwards. ...

javascriptvue.jsvuejs2

Using Socket.IO in Node.js to distribute information to every connected client

Currently, I am in the process of developing a WebGL multiplayer game. My approach involves using socket.io and express in node.js to enable multiplayer functionality. However, I am encountering an issue with broadcasting key events. When a user presses a ...

javascriptnode.jsexpresssocket.iowebgl

Testing Ajax code encounters error

Currently, I am running a code test with Jasmine and setting up a mock object for the ajax method. spyOn($,'ajax').and.callFake(function(e){ console.log("is hitting"); }) In order to test the code snippet below: $.ajax({ url: Ap ...

javascriptajaxjasmine

Tips for updating a list of orders using keywords entered in a text input field

I have a collection of car objects and an input field that triggers a change event. When the value in the input field is updated, I want to reorganize the order of the cars. For example, if I enter "Tau" in the input box, I want the ford object to be plac ...

javascriptnode.jsmongodb

Incorporate Object names and Variable names in Javascript programming

I have an object named res and a variable named lea. I need to concatenate. For example: let lea = "abc"; let res = { abc:'steve' }; console.log(res.lea); So my output should be steve. I tried it like this: console.log(res.`${lea}`); ...

javascriptjqueryobjectvariablesjavascript-objects

Assign the Firebase token to the JavaScript cookie value

Can a cookie store a token value? In my setup with js-cookie, Firebase auth/firestore, and Next.js, I am setting my cookie within the handleUser function like this: const handleUser = async (rawUser) => { if (rawUser) { const user = await fo ...

javascriptfirebasenext.jsfirebase-authenticationjs-cookie

Typescript polymorphism allows for the ability to create various

Take a look at the following code snippet: class Salutation { message: string; constructor(text: string) { this.message = text; } greet() { return "Bonjour, " + this.message; } } class Greetings extends Salutation { ...

javascripttypescriptpolymorphism

In the controller file, I plan to utilize a global variable for storing the user's session, ensuring it is securely saved for reference

In my web application about courses, I am faced with the challenge of saving a user's username throughout their session and then storing their progress in the database after completing a course. Instead of repeatedly asking the user to input their use ...

angularjs

Cease the execution of a task in Express.js once the request timeout has been

Suppose we have the following code snippet with a timeout of 5 seconds: router.get('/timeout', async (req, res, next) => { req.setTimeout(5000, () => { res.status(503) res.send() }) while (true) { ...

javascriptnode.jsexpress

.bootstrapMaterialDatePicker does not work within Codeigniter version 3

I am experiencing an issue with my form that has two date fields stored as varchar <div class="row clearfix"> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label"> <label for="ar ...

javascriptphphtmlcodeigniter-3

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

javascripthtmljsonanimationchart.js

What is the best way to select and link a specific section of a string using Javascript?

I have a JavaScript string that looks like the following: const pageContent = "He stood up and asked the teacher, "Can you elaborate the last point please?"; My goal is to map out the words in the string and display them in a way that makes ...

javascriptreactjs