The input-group-btn is positioned to the right of the field, appearing to float

The input-group-btn for the targetDate field remains fixed on the right side of the input group despite screen width variations until I introduce the automatically generated CSS from the hottowel generator. I require assistance in identifying which aspect of the CSS is influencing this behavior.

Feel free to view this jsfiddle
I have attempted all three grid layout sizes without success, but I suspect that may not be the issue.

<section class="mainbar">
<section class="matter">
    <div class="container">
        <div class="row">
            <div class="widget wviolet">
                <div ht-widget-header title="{{vm.title}}"></div>
                <div class="widget-content user">

                    <form name="submitjobform" novalidate  id="submitjobform" ng-submit="vm.processForm()">
                    <div class="form-group">
                        <div class="row">
                            <label for="name" class="col-lg-2 control-label">Name</label>
                            <div class="col-lg-10">
                                <input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
                                <span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                   </div> <!--  </div>  form-group -->
                   <div class="form-group">
                        <div class="row">
                            <label for="description" class="col-lg-2 control-label">Description</label>
                            <div class="col-lg-10">
                                <textarea  ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
                                <span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->  
                    <div class="form-group">
                        <div class="row">
                            <label for="category" class="col-lg-2 control-label">Category</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
                                <span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                          </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group --> 
                    <div class="form-group">
                        <div class="row">
                            <label for="assignee" class="col-lg-2 control-label">Assignee</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
                                <span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                            </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->
                     <div class="form-group">   
                        <div class="row">
                            <label for="targetDate" class="col-lg-2 control-label">Target Date</label>
                            <div class="col-lg-8">
                                <!-- <div class="col-lg-4"> -->
                                    <div class="input-group">
                                        <input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> 
                                        </input>
                                        <span class="input-group-btn">
                                            <!-- " -->
                                            <button type="button" class="btn btn-default" ng-click="vm.open($event)">
                                                <i class="glyphicon glyphicon-calendar"></i>
                                            </button>
                                        </span>
                                    </div> <!--input group -->
                                <!-- </div> /col-lg-4  -->
                            </div>  <!--/col-lg-8 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->     
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-2">
                                    <input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                                </div>  <!--/col-lg-2 -->
                            </div>
                        </div>
                        <div>
                        <tt>name = {{vm.submitjobform.name}}</tt><br/>
                        <tt>desc = {{vm.submitjobform.description}}</tt><br/>
                        <tt>category = {{vm.submitjobform.category.name}}</tt><br/>
                        <tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
                        <tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
                        </div>
                    </form>
                    </div> <!-- content-user div -->
                <div class="widget-foot">
                    <div class="clearfix"></div>    
                </div>
            </div> <!-- widget violet -->
            </div> <!-- row div -->
        </div> <!-- container div -->
    </section>
</section>

Thank you

Simon

Answer №1

http://codepen.io/jessicax23/

It looks like you are utilizing bootstrap based on the css import in your code snippet.

The key issue here is that you forgot to include the bootstrap JS file. If you remove the CSS from your code and switch to using jQuery 2.1 with Bootstrap 3.2 in your settings, your code should work correctly.

Remember to always design for mobile devices first when working with bootstrap.

You seem to have all the necessary components

class="col-lg-2" 

If you were just playing around, keep in mind to start designing for xs/sm screens and then move up to larger sizes.

Additionally, there seems to be an extra </input> tag hanging around. Make sure to remove it as well.

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

Looking for assistance with submitting a form?

Looking for assistance with a JavaScript hack. Since this morning, I've been trying to figure out a simple hack that would enable me to submit a form multiple times. Take a look at this image. It's a basic form. What I want is to be able to su ...

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

Is there a quick way to apply the !important rule to all properties in a CSS file?

Seeking a quick one-line shortcut to add !important to every CSS property in my extensive CSS file. Any suggestions on making the whole .css file !important? ...

Mastering data binding with Vue Js is a process that requires dedication and time

I'm a Vue JS beginner and I've created a component that repeats a grid-like section. However, I've noticed that adding a dropdown in the grid is causing a significant increase in load time. As the number of records grows, the load time will ...

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Here is the complete code snippet: this.http.post(link, data, { headers: headers }) .map(res => res.json()) .subscribe(data => { this.data.response = data._body; }, error => { console.log("Oops! An error occurred"); ...

Creating Apps for Windows Phone 8 with PhoneGap

Looking to create a Windows Phone 8 app using Phonegap? I've successfully used Phonegap for Android and iOS, but it seems like there are some prerequisites for developing WP8 apps with phonegap: Node.js Windows Phone SDK IE10 A 64-bit version of Win ...

The process of sending a POST parameter to a page in PHP and opening it

When attempting to open a page using PHP, such as: $html = file_get_contents('https://hammihan.com/search.php'); I encountered an issue where the page was being redirected to https://hammihan.com/users.php due to an empty input for name. To addr ...

Having difficulty incorporating multiple "if" statements into my code

I'm currently working on creating an IE9 specific if statement. Basically, I want to check if the menu is collapsed and then move 3 classes from the left if it is true, or in the opposite direction if it is false. However, I'm struggling to get t ...

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...

What is the best way to allow JavaScript to access a Laravel asset?

Currently, I am working on creating a slideshow and have implemented a navbar.js file with the following code: images[0] = "{{ asset('cover/deanna-j-3GZlhROZIQg-unsplash.jpg')}}"; images[1] = "{{ asset('cover/kevin-laminto ...

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

Having difficulty using the forEach() method to loop through the array generated by my API

During my troubleshooting process with console.log/debugger, I discovered that I am encountering an issue when attempting to iterate over the API generated array in the addListItem function's forEach method call. Interestingly, the pokemonNameList ar ...

Tips for preventing special characters from being entered into a Kendo grid input column

Is there a way to prevent users from entering special characters into the description column of my Kendo grid? The column field setup is as follows: { field : "myDesc", width : 200, title : "My Description"} I have attempted the following approach so far ...

Heroku Foreman unexpectedly stops while using Express.js bodyParser() function

After running foreman start, the following message is displayed: > foreman start 20:38:55 web.1 | started with pid 3896 20:38:55 web.1 | Development 20:38:56 web.1 | connect.multipart() will be removed in connect 3.0 20:38:56 web.1 | exited with co ...

Tips for indicating request parameters in Drive.Comments.list

I have successfully retrieved the default 20 comments using the code below by specifying a single fileId parameter. However, I am interested in pulling back one hundred comments or paginating to the next set of 20 out of curiosity. In my getComments funct ...

What methods can be used to block direct attribute updates in a JS/TS class?

class Creature { secretProperty modifySecretProperty(value) { this.secretProperty = value } } new Creature().modifySecretProperty('hidden way') //success new Creature().secretProperty = 'not permitted' // failure To r ...

Preserving the valuable AJAX response for future reference

My current task involves making AJAX requests within a JavaScript Interval function, specifically once every 10 seconds. The challenge I'm facing is figuring out how to store the response (text from the previous request) in a JavaScript variable. On ...

A problem arises when making an ajax call

I'm struggling with an Ajax call made using the jQuery .blur() method. Every time I try to execute it, an error message pops up. Any idea why this is happening? Here's my jQuery/Ajax Code: <script> $("#given_name").blur(function(){ va ...