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.

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

Tagsinput #46

Open
boldizsarf opened this Issue Mar 21, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@boldizsarf
Copy link

boldizsarf commented Mar 21, 2019

The tagsinput it does not work well. If I want to use the code

<div class="form-group">
     <label>Tags</label>
     <div class="bootstrap-tagsinput"><input type="text" placeholder=""></div>
     <input type="text" class="form-control inputtags" style="display: none;">
</div>

what is in the template's forms-advanced-form.html, it just doesn't work well. You can see there: http://prntscr.com/n15n41. I noticed, that by default, the required CSS and JS is not in the template. So I added

<link rel="stylesheet" href="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

to the header, and

<script src="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<script src="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/src/bootstrap-tagsinput.js"></script>

to the body. After that, there is some CSS, but its not the perfect, and the JS is not working. http://prntscr.com/n15oeo

So I decided to change the default tagsinput code to

<div class="form-group">
     <label>Tags</label><br>
     <input type="text" class="form-control" data-role="tagsinput">
</div>

Now, We can see, that the the input was changed. Now, its working.
http://prntscr.com/n15pd3
http://prntscr.com/n15pte
http://prntscr.com/n15pyw

But the CSS is still not good. It doesn't look like the original.

http://prntscr.com/n15qus
http://prntscr.com/n15qzk

@nauvalazhar

This comment has been minimized.

Copy link
Member

nauvalazhar commented Mar 22, 2019

Hi, thank you for reporting the issue. Is there an error in your browser console? Or can we fix it with width: 100%; in the CSS file?

@boldizsarf

This comment has been minimized.

Copy link
Author

boldizsarf commented Mar 22, 2019

I tryed

<input type="text" class="form-control tagsinput" data-role="tagsinput" style="width: 100%;">

but its still not working. And there is no error for this, in the console.

This is in my console:

(index):2 Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details
auth-register.js:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED
components-multiple-upload.js:1 Uncaught ReferenceError: Dropzone is not defined
    at components-multiple-upload.js:1
components-statistic.js:7 Uncaught TypeError: $(...).sparkline is not a function
    at components-statistic.js:7
components-table.js:1 Uncaught TypeError: $(...).sortable is not a function
    at components-table.js:1
components-user.js:1 Uncaught TypeError: $(...).owlCarousel is not a function
    at components-user.js:1
features-post-create.js:3 Uncaught TypeError: $(...).selectric is not a function
    at features-post-create.js:3
forms-advanced-forms.js:1 Uncaught ReferenceError: Cleave is not defined
    at forms-advanced-forms.js:1
gmaps-advanced-route.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-advanced-route.js:1
gmaps-draggable-marker.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-draggable-marker.js:1
gmaps-geocoding.js:4 Uncaught ReferenceError: GMaps is not defined
    at gmaps-geocoding.js:4
gmaps-geolocation.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-geolocation.js:1
gmaps-marker.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-marker.js:1
gmaps-multiple-marker.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-multiple-marker.js:1
gmaps-multiple-marker.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-multiple-marker.js:1
gmaps-route.js:4 Uncaught ReferenceError: GMaps is not defined
    at gmaps-route.js:4
gmaps-simple.js:1 Uncaught ReferenceError: GMaps is not defined
    at gmaps-simple.js:1
index-0.js:3 Uncaught TypeError: Cannot read property 'getContext' of null
    at index-0.js:3
index.js:1 Uncaught TypeError: Cannot read property 'getContext' of null
    at index.js:1
modules-calendar.js:1 Uncaught TypeError: $(...).fullCalendar is not a function
    at modules-calendar.js:1
modules-datatables.js:31 Uncaught TypeError: $(...).dataTable is not a function
    at modules-datatables.js:31
modules-slider.js:1 Uncaught TypeError: $(...).owlCarousel is not a function
    at modules-slider.js:1
modules-sparkline.js:7 Uncaught TypeError: $(...).sparkline is not a function
    at modules-sparkline.js:7
modules-vector-map.js:1 Uncaught TypeError: $(...).vectorMap is not a function
    at modules-vector-map.js:1
utilities-contact.js:1 Uncaught ReferenceError: GMaps is not defined
    at utilities-contact.js:1

There are some errors, but I think none of these is related to this

@nauvalazhar

This comment has been minimized.

Copy link
Member

nauvalazhar commented Mar 23, 2019

Try fixing the errors above. Sometimes errors from a library are caused by errors from libraries on it or other libraries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.