Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

plus and minus icons are not showing #39

Closed
hasintha opened this issue Jun 16, 2019 · 5 comments
Closed

plus and minus icons are not showing #39

hasintha opened this issue Jun 16, 2019 · 5 comments

Comments

@hasintha
Copy link

hasintha commented Jun 16, 2019 •
edited

Hello there

I'm running this in localhost. The plus and minus sign of the spinner are not showing up. The browser only shows a default spinner

here is my page

`
<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/styles.css" >

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<!-- Extra scripts for BS  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="http://localhost/front-end/js/bootstrap-input-spinner.js"></script>

<script>
    jQuery("input[type='number']").inputSpinner()
</script>

<script>
  jQuery( function() {
    jQuery( ".datepicker" ).datepicker();
  } );
</script>

<div class="form-container">

  <form class="form-horizontal" action="" method="POST">

      <!-- Number of adults-->
      <div class="form-group">
        <label class=" control-label" for="adults">Adults</label>
        <div class="">
          <input name="adults" type="number" value="0" min="0" max="5" step="1" />
        </div>
      </div>

      <!-- Number of children -->
      <div class="form-group">
        <label class="control-label" for="children">Children</label>
        <div class="">
           <input name="children" type="number" value="0" min="0" max="5" step="1"/>
        </div>
      </div>

      <!-- Number of infants -->
      <div class="form-group">
        <label class=" control-label" for="infants">Infants</label>
        <div class="">
          <input name="infants" type="number" value="0" min="0" max="5" step="1"/>
        </div>
      </div>

     

      </fieldset>
      </form>

     </div>

`
@shaack
Copy link
Owner

shaack commented Jun 17, 2019

That's pretty much more of a problem with the code than with the inputspinner. What I see is that the HTML is not valid, e.g. the opening fieldset tag is missing. If you make a version available online, I can take a closer look.

@hasintha
Copy link
Author

@shaack Thanks for the quick reply mate. Sorry for the late reply. I've added you as a collab for the repo. the sources are inside the front-end folder. I have removed the fieldset tag.

https://github.com/hasintha/travelport/tree/master/front-end

@hasintha
Copy link
Author

It worked after I wrapped the function call around a jQuery();

jQuery( function() { jQuery("input[type='number']").inputSpinner(); });

@shaack
Copy link
Owner

shaack commented Jun 24, 2019 •
edited

Thanks for your feedback. It looks like a timing problem. You cant initialise the spinner before its HTML is rendered. So it should also work, when you put the code jQuery("input[type='number']").inputSpinner(); at the bottom of your html or if you use jQuery(document).ready([...]); to initialize the spinner.

@hasintha
Copy link
Author

Got it. Cheers mate.

@shaack shaack closed this as completed Jun 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hasintha @shaack