Bootstrap in Joomla 3

[John666]

I have recently set up a new site using Joomla 3.5.1. Actually is in a migrated version of an existing Joomla 2.5.28 site although with weeks of additional work to get it working again.

I have extensive problems with input field widths all over the site. For example, in the Virtumart Currency Selector (see: http://www.openphotographicsociety.org/ ... dvertising) where the input field in far too wide and snaps to a smaller size when clicked. Indeed such fields seem to fill the available width in the template position.

This problem is also apparent in The Free Paypal module (although I have modified this to some extent on the quoted page), the Google Translate module (at the top of the page) and numerous other instances on other pages throughout the site.

I am out of my depth here, but I understand that the difference is basically caused by Joomla 3.5.1 making much greater use of bootstrap.min.css. The effect is to render countless formatting problems throughout the site which are near impossible to correct. I just do not like input fields designed to accept a few characters that are displayed a couple of inches wide - and which shrink dramatically when the cursor is placed in the field. Presentation of this sort is just ugly in my view.

Are other people having similar issues? If not, can anyone advise regarding a solution to this problem?

Comments appreciated.

[Gany]

Joomla uses Bootstrap 2.3.2 by default. It's not impossible your template has Bootstrap 3. Switch to the Protostar default template, and see if your problem is solved.

[John666]

Thanks for your reply - it is appreciated.

I switched to Prostar as you suggested but the problem remains. For instance, in Virtuemart category there is a dropdown selector that allows the user to choose how many products appear on each page. The options are 10, 20, 40 or 100 - so a maximum of three characters - but the field is displayed 2.5 inches wide (in my template as well as Prostar.

The above example is just one of many where, under Joomla 3.5.1, bootstrap seems to destroy layouts by forcing field widths to a standard maximum. A few I have managed to control by adding custom css but others I cannot fix. Surely this should not be necessary.

[SharkyKZ]

In Bootstrap 2 select width is set to 220px. You can set it to auto so it resizes to whatever width it needs depending on its contents. And perhaps add max-width to prevent it from getting too wide.

[John666]

Thank you - that is useful. I see that it is set to 220px but how do I change it? Presumably it has to be done on a case-by-case basis because some fields need very little width and others need more. Please look at this page:

http://www.openphotographicsociety.org/ ... ction-fees

It seems crazy to me that the "Results 1-5" dropdown is so wide (to the left of the currency selector which I have managed to modify). This basic issue has come up in many places as a consequence of upgrading this site from Joomla 2.5.28 to Joomla 3.5.1. The template has not changed because it is compatible with both Joomla versions.

Incidentally my template uses version 2 of bootstrap. Joomlashine (the source company) say that they are working on modifying templates to accommodate field width problems with Joomla 3+. However, if Prostar has the same problem I cannot really blame Joomlashine.

[Jim Holloman]

Comment out the "width: 220px;" at line 9 of bootstrap.min.css that is part of the "select" class and see what it does to the website.

If it does bad things, then create a new line directly under the comment of something like:

width: 50px;

You could even try something like 10px;

And, see what that does to the website. Does the box expand for wider fields or does it scroll.

The "select" class effects only the select boxes (dropdown boxes).

------------------------

Next step to help with isolation:

Create a fresh Joomla test site with no third party templates -- use the Protostar template. Then, add the dropdown boxes and see how the site behaves. Add only the extensions necessary for this test. I am assuming that the third party template is not required for the dropdown boxes -- and that may be a bad assumption.

If that works, then backup just the database of the test site. Then, backup just the database from the existing website (Ver.2.5). Continue testing with the Protostar template until all needed extensions and plugins are installed. Import the database from the Ver. 2.5 site into the Ver. 3.5 website. If it still works, switch to the third party template.

-----------------------

I have not seen this issue mentioned previously, So, I am either out of the loop or it is not a common issue -- as one would expect if it was caused by an incompatibility between Joomla 3 and Bootstrap.

[leolam]

Many if not most template clubs deliver their templates already based on Bootstrap3. Check out

• Joostrap
• Rockettheme
• Joomlart
• Gavick
• Yootheme
• Joomlabamboo

to mention a few. Some have free versions so check them out and it will help you avoiding making tons of changes in css

Leo

[Gany]

I'm using Joostrap myself and -so far- never had any problems with Bootstrap problems in extensions or plugins.

[leolam]

I'm using Joostrap myself and -so far- never had any problems with Bootstrap problems in extensions or plugins.

That is correct....These frameworks fully support this and a user won't have problems with extensions (unless the extensions are badly coded)

Leo

[John666]

Thanks to all for the comments.

I have tried at least some of the suggestions, but setting up a further test site is not really practical for me at the moment. I already have the two sites/databases the hosting account allows and have my hands full with migrating and developing several other sites. I do appreciate the validity of the suggestion but I doubt whether I can realistically expect to get that done any time soon.

When I commented out the "width: 200px;" parameter of the select class the fields within Virtuemart seemed to return to their sensible widths - ie the quoted "no of items per page" example then only occupied the space required for the maximum of three digits. The field length in GTranslate module also reduced appropriately. However, other fields within other extensions were unaffected by the change in bootstrap.

This particular site used quite a few extensions - components, modules and plugins - so it is perhaps an example of a site that would show up such a problem. It seems to me that some of the extensions rely totally or partially on bootstrap for their css, and others either do not or use a pick-and-mix approach. Across the site, therefore, the effect of commenting out the 220px element is variable - in some cases the fields return to an appropriate width (as they were in the earlier Joomla 2.5 implementation of the site) while other fields are completely unaffected.

I also tried changing the 220px width to other figures - such as 120px. This had a similar effect, shortening some fields to 120px (ie in Virtuemart) but not affecting the widths of fields in some other extensions.

The template I am using is JSN Tendo, from Joomlashine, and I have to say that over the years it has been excellent. The support offered by Joomlashine, ie their response to support tickets and to forum posts, is second to none - very professional. There have been almost no technical issues with the template over many years. It is updated appropriately and I would be very reluctant to change it.

Thanks again - any further comments would be welcomed.

[SharkyKZ]

So what exactly is the issue now?

[John666]

In summary, the issue is that with a Joomla 3+ site it has proved very difficult to achieve effective control of input field widths. The Virtuemart case quoted in the earlier posts is an excellent example of how even very well established extensions can exhibit field-width problems. Such problems, in my experience, are often very difficult to address. Changing bootstrap may change countless other elements, and adding custom css for each case can be difficult and is likely to prove time consuming.

Other people must surely have encountered the Virtumart case, and I hoped by posting to discover how they had resolved the issue. I don't believe I am the only one with this problem.

Thanks

[leolam]

Connect with JSN....They provide your template... Nexst time post that directly what framework you use so I could have saved myself some time. This is not a "Joomla-issue" but an issue with support by JSN for VM. I have different experiences with these blokes but since you have used them for years so connect how to solve... It is not Joomla for sure but the JSN-framework.... If your template is not proper updated for Joomla 3.5 btw you also get these issues. If most template providers use Bootstrap 3 you might ask JSN why they have not yet made the jump? Again this is the Template you use and not Joomla... Width of selectors/input fileds etc etc are set in css of your template and not in Joomla

Leo

[leolam]

[quote="leolam"]Connect with JSN....They provide your template... Nexst time post that directly what framework you use so I could have saved myself some time. This is not a "Joomla-issue" but an issue with support by JSN for VM. I have different experiences with these blokes but since you have used them for years so connect how to solve... It is not Joomla for sure but the JSN-framework.... If your template is not proper updated for Joomla 3.5 btw you also get these issues. If most template providers use Bootstrap 3 you might ask JSN why they have not yet made the jump? Again this is the Template you use and not Joomla... Width of selectors/input fileds etc etc are set in css of your template and not in Joomla.

Is the JSN framework updated to latest 3.1.0? Is the Tendo template upgraded to a version that works with Joomla 3.5.x?

Leo

[John666]

Thanks again.

Yes, the JSN framework is updated to 3.1.0 and the template is at the latest version. OK, I'll talk to JSN as you suggest, of course, but I cannot then see why the problem persists when I change my site to Protostar (see earlier post). I guess there must just be a problem there too, though I realise it may not be the same issue - just the same result. And the problem is not just with Virtuemart - VM just offers a good example.

I may have been misled by posts like this:
https://www.joomlashine.com/forum/75-js ... ootstrap-3

It is a confusing world out there!

Thank you for all you time and effort in talking this over. I appreciate your help.