Forums

I try to use Bootstrap components on my form.
So far with limited success.

The Bootstrap 3.02 doesn't seem to work with the components.
Tried to replace the assets/bootstrap files with the files from http://getbootstrap.com.
Now the components work a bit but Chronoforms not anymore.

Is it possible to use Bootstrap components with Chronoforms, and if so, how?

Rob

Hi RobP,

What components are you trying to use exactly?

As far as I can see CFv5 loads Bootstrap 3.0.2 so changing the file won't help.

Bob

The Bootstrap version included in v5 has some changes so that it wouldn't conflict with Joomla's bootstrap or cause any side conflicts, if you post what you need to do then I can give you some hints.

Regards,
Max

Hi Max.

I would like to be able to use most Bootstrap components and styling.
Like nav nav-tabs, Buttons, Drop-down, tables etc.
The Bootstrap tabs and pages adjust very good for small screens.


And the Columns, the standard resizable containers don't work very well with small screens.

Is it possible to get a not compressed bootstrap.js so I can look at the differences?

Rob

Hi Rob,

I don't have an uncompressed .js version available, what I have changed in the .js is that I have replaced all "data-" with "data-g-" as far as I can remember, this is because BS2 is loaded by Joomla, loading BS3 on the same page caused big conflicts with Joomla admin and frontend fancy features.

The .css only change is that I use some LESS compiler to include all classes inside a .gbs3 class, for the same reason, no conflicts with other page elements.

So if you can adapt to these 2 changes then you can use BS3 in Chronoforms, or if your template has BS2 loaded by default, and you want to do everything according to BS docs then just use it.

Regards,
Max

So for example, the Modal in BS3 has a close button which can be set using a "data-dismiss" attribute, in my BS3, you will need to use data-g-dismiss instead!

Regards,
Max

Hi Rob,

I ran a diff report between re-formatted versions of the two files in the /libraries/cegcore/assets/bootstrap/js folder. This should point up all of the changes (though the line numbers won't work in the compressed file of course:

39c39
<   var b = '[data-dismiss="alert"]',
---
>   var b = '[data-g-dismiss="alert"]',
48c48
<       e = d.attr("data-target");
---
>       e = d.attr("data-g-target");
51c51
<     b && b.preventDefault(), f.length || (f = d.hasClass("alert") ? d : d.parent()), f.trigger(b = a.Event("close.bs.alert")), b.isDefaultPrevented() || (f.removeClass("in"), a.support.transition && f.hasClass("fade") ? f.one(a.support.transition.end, c).emulateTransitionEnd(150) : c())
---
>     b && b.preventDefault(), f.length || (f = d.hasClass("alert") ? da : d.parent()), f.trigger(b = a.Event("close.bs.alert")), b.isDefaultPrevented() || (f.removeClass("in"), a.support.transition && f.hasClass("fade") ? f.one(a.support.transition.end, c).emulateTransitionEnd(150) : c())
79c79
<     var a = this.$element.closest('[data-toggle="buttons"]');
---
>     var a = this.$element.closest('[data-g-toggle="buttons"]');
96c96
<   }, a(document).on("click.bs.button.data-api", "[data-toggle^=button]", function(b) {
---
>   }, a(document).on("click.bs.button.data-api", "[data-g-toggle^=button]", function(b) {
172c172
<       e = a(d.attr("data-target") || (c = d.attr("href")) && c.replace(/.*(?=#[^\s]+$)/, "")),
---
>       e = a(d.attr("data-g-target") || (c = d.attr("href")) && c.replace(/.*(?=#[^\s]+$)/, "")),
237c237
<   }, a(document).on("click.bs.collapse.data-api", "[data-toggle=collapse]", function(b) {
---
>   }, a(document).on("click.bs.collapse.data-api", "[data-g-toggle=collapse]", function(b) {
239c239
<       e = d.attr("data-target") || b.preventDefault() || (c = d.attr("href")) && c.replace(/.*(?=#[^\s]+$)/, ""),
---
>       e = d.attr("data-g-target") || b.preventDefault() || (c = d.attr("href")) && c.replace(/.*(?=#[^\s]+$)/, ""),
243c243
<       i = d.attr("data-parent"),
---
>       i = d.attr("data-g-parent"),
245c245
<     g && g.transitioning || (j && j.find('[data-toggle=collapse][data-parent="' + i + '"]').not(d).addClass("collapsed"), d[f.hasClass("in") ? "addClass" : "removeClass"]("collapsed")), f.collapse(h)
---
>     g && g.transitioning || (j && j.find('[data-g-toggle=collapse][data-g-parent="' + i + '"]').not(d).addClass("collapsed"), d[f.hasClass("in") ? "addClass" : "removeClass"]("collapsed")), f.collapse(h)
258c258
<     var c = b.attr("data-target");
---
>     var c = b.attr("data-g-target");
264c264
<     e = "[data-toggle=dropdown]",
---
>     e = "[data-g-toggle=dropdown]",
322c322
<     this.$element.trigger(d), this.isShown || d.isDefaultPrevented() || (this.isShown = !0, this.escape(), this.$element.on("click.dismiss.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function() {
---
>     this.$element.trigger(d), this.isShown || d.isDefaultPrevented() || (this.isShown = !0, this.escape(), this.$element.on("click.dismiss.modal", '[data-g-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function() {
369c369
<   }, a(document).on("click.bs.modal.data-api", '[data-toggle="modal"]', function(b) {
---
>   }, a(document).on("click.bs.modal.data-api", '[data-g-toggle="modal"]', function(b) {
372c372
<       e = a(c.attr("data-target") || d && d.replace(/.*(?=#[^\s]+$)/, "")),
---
>       e = a(c.attr("data-g-target") || d && d.replace(/.*(?=#[^\s]+$)/, "")),
627c627
<     var c = this.selector + '[data-target="' + b + '"],' + this.selector + '[href="' + b + '"]',
---
>     var c = this.selector + '[data-g-target="' + b + '"],' + this.selector + '[href="' + b + '"]',
688c688
<   }, a(document).on("click.bs.tab.data-api", '[data-toggle="tab"], [data-toggle="pill"]', function(b) {
---
>   }, a(document).on("click.bs.tab.data-api", '[data-g-toggle="tab"], [data-g-toggle="pill"]', function(b) {

Used the Javascript Deminifier for Firefox to decompress the bootstrap.js
http://pruijt.home.xs4all.nl/bootstrap-3.02%20chronoforms.js
http://pruijt.home.xs4all.nl/bootstrap-3.02.js


There are more differences than just the target and toggle.

Maybe loading the original Bootstrap just for the Frontend will solve it.

Rob

Most Joomla themes use BS2 (I read that many started to use BS3 but Joomla is not using it anytime soon), so loading BS3 on frontend without changes may cause problems if you have BS2 loaded.

Just loaded Bootstrap 3.20 in my template.
So far promising, only the Chronoforms tabs stopped working.

Only one bootstrap.js loaded, that looks good!

Some items it still uses the media/jui bootstrap.css.
Luckily it uses only 24 of the 453 css files in the frontend.
With some file-compare it should be possible to reduce that.

Rob

Hi Rob,

I just downloaded a fresh copy of Bootstrap 3.0.2 and re-compared the bootstrap.min.js file with the ChronoForms bootstrap.js file and the only changes are those in the diff file I posted earlier.

There are many more differences that show up with the un-minified file - but presumably these are all comments as the code is all in the bootstrap.min.js file.

Bob

Hi Bob,

The variable and function names are different to,
Maybe the min file is compiled differently.

Since my template (JSN-epic from Joomlashine) is responsive without using Bootstrap I can load any Bootstrap script and css I want.

For me it is much easier to load Bootstrap 3.2 in the template and set the style to none in the form, that way I can use all the standard Bootstrap components and script, or even compile my own version.

Figuring out why something does not work takes to much time at the moment, especially since I have a slight tendency to get sidetracked.

At the moment I am working on a statistical analyse module to evaluate my data and present the result in a way managers can understand.
The last part is the hardest as they seem to prefer coloured graphs over tables with numbers.

Rob

Hi Bob,

Compared the css min files, you are right, there are not many differences.
I think to problem with my site was caused by the conflicts between all the css files. Components used part of the Bootstrap 2.3.2 and part of the 3.02 from chronoforms.

The Joomlashine template still used Bootstrap 2.3.2 css, is not possible to stop that.
Well it is possible, but very complicated and every update will revert that.

So I switched to the J3 template, completely Bootstrap 3.20 , so everything works now as it should.

Had to set the Form theme to CGoreUI to keep the radiobuttons inline.
It would be great if it is possible to use Bootstrap3.20 for chronoforms to, less css , but at least it works now.


Rob

I believe I'm also having trouble with a bs3/bs2 conflict. I was trying to use modal dialogs, which everything I find on the internet seems to say I should be including the following:
<a class="modal" href="someLinkOnMySite">Click</a>

However, this does not even show a link so there is nothing to even click. I tried setting the form theme to none and I can get it to work, however that breaks the tabs I have set up. Can you help me out with how I would set up a link that would show a modal dialog?? I have also tried the following:

<a data-g-toggle="modal" data-g-target="#divToShow">Click</a>

and it shows a link, but clicking it does nothing!

Did you add the modal HTML code to the page as well ? because the modal code is not generated on the fly, you have to have it on the page!

Regards,
Max

You mixed up the code a bit.
A href point to something, that should be in the button and not in the modal.
Personally I avoid hrefs, there are always problems with the path if you attach a form to a menu, and they are not necessary. Data-target works better.

In Chronoforms 5 with Bootstrap 3 there is a conflict with the Modal Class, the <div class> should be "modal fade" but that does not work.
I use Bootstrap 3.2 in my Template (T3 template) and set the style of the form to GCoreUI.
Now I can use the Bootsrap 3.2 without conflicts.

Use a Container element set to Custom.
In the start code:

<div id="id-of-modal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×<span class="sr-only">Close</span></button>
       <h4 id="myModalLabel" class="modal-title">Title of modal</h4>
     </div><!-- /.modal header -->
     <div class="modal-body">
       <p>>

And in the End code

</p>
     </div><!-- /.modal body -->
     <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> 
     </div><!-- /.modal footer -->
    </div><!-- /.model content -->
  </div><!-- /.modal dialog -->
</div><!-- /.Modal -->

Now you can put what you want in the Container and it is shown in the Modal.
The modal is part of the form so the form data array is accessible.

Button
If you want to show the modal with a Button:
Put a Button on the form:
Type=Button
Value/Label= Text you want on the Button

Extra params (without quotes) :
data-toggle=modal
data-target=#id-of-modal


Of call it with javascript
$('#myModal').modal(options)

Rob

Max, yes I have a div in my page with the id my href was pointing to. So, <div id="divToShow">... and <a href="#divToShow">Click</a>. I also tried using a button: <button data-g-toggle="modal" data-g-target="#divToShow">Click</button>. Rob, thanks for your suggestion, but I have a bootstrap 3.2 template and I'm not sure that I can make a switch to a 3.3 template at this time. It seems like Max has accounted for the conflicts between 3.2 and 2.3, but I just can't figure out how to get the modal dialog showing with his version of bootstrap3.

The T3 template is Bootstrap 3.2 , that is currently the latest version.
If your template is also 3.2 you can set the style of the form to GCoreUI.to avoid conflicts.
You can then use Bootstrap 3.2 in your custom modules.

Rob

Oh, I'm so sorry for the confusion, I meant to say my template is 2.3***** wow worst typo to make.

If your template has bs2 loaded then you can use the modal code any where on the page and that should work, as long as it matches the bs2 modal requirements!

but you can still use the bs3 modal code inside your form only and that should work as long as you do some small changes, changing the data- to data-g-

Unfortunately that works only for the standard Chronforms components, not for the Custom components.
With the Modals most is put inside the GBS3 tag, but the backdrop isn't, the modal ends up barely visible behind the backdrop somewhere to the left of the screen.

For me it was easier to set the form style to GCoreUI and use the Bootstrap 3.2 from the template for the custom modules.

Rob