jquery-bootgrid Styling Issue - jquery-bootgrid

jquery-bootgrid is a great little tool, i have it working perfectly well functionally, but i have an issue with the styling of the control.
For some reason the search bar generated by the js library spans across the entirepage, forcing the control for selecting the number of results shown, down to a new line.
I've also noticed that the paging control isn't styled correctly and nor is the dropdown for removing columns.
I've got the latest css and js files, is anybody else having the same issue?
I have the latest bootstrap available, could this be an issue?

My bad, I didn't include the jquery.bootgrid.css in my bundling at the right spot.

Related

How do you see your html edits after you reload (Firefox DevTools)?

I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.
I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.
It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?
FWIW, I can find ways of doing this for CSS and JS changes.
There is currently (as of Firefox 92) no such feature of re-applying HTML changes.
What I found is a feature request in Mozilla's bug tracker.
At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.
Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime.
For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.

How to make Firebug group computed styles?

Firebug used to to display styles in the Computed panel like this, with computed styles grouped:
But for some reason it now displays computed styles like this:
The only grouping available is "Other" which appears to contain every CSS style. How do I make CSS styles group together?
I am using Firefox 46 with Firebug 2.0.16. The change began seemingly out of nowhere, I did not adjust any settings.
I have tried toggling every option in the dropdown menu. The value of the computedStylesDisplay setting is grouped (default value). I tried switching to alphabetical and then back to grouped but it changed nothing.
This is obviously a bug in Firebug in combination with Firefox 46.0. In Firefox 45.0.x it was still working fine.
I've filed a bug for that in Firebug's issue tracker and already fixed it. I have also created a build with that fix. Now it's up to the Firebug team to make a proper new release.
Note that the Firebug team is already working on Firebug 3, which integrates into the Firefox DevTools. Those tools don't have the grouping yet, but it's already requested in bug 977128.
Update:
Firebug 2.0.17 got released, which includes the aforementioned fix.
Update:
Firebug is officially discontinued, i.e. its maintenance has stopped in favor of pushing the development of the Firefox DevTools.
I've run into the same issue. It doesn't exactly solve the problem but what I've found helps at least a little is to click Options -> Show Quick Info Box. Gives a list of current applied styles to the element you're hovered over in the HTML console but unfortunately doesn't provide the original CSS reference line.

Joomla articles and modules not showing on small screens

I'm really quite new to Joomla and I've encountered a problem. On my homepage the article is showing just fine, but all the other modules (except for the menu bar) disappear when I switch to a smaller screen size. On my other pages the article doesn't even show anymore, just the menu bar. I'm using the purity III template. I have no idea what's going on since the settings in the layout of the template indicate that all modules that are showing on a desktop should also be displayed on a mobile device, and I've found no difference in settings in the articles itself. My site.
Thanks for your help!
It sounds like the responsive design hides them on purpose.
Just from a quick peek at your code using inspect element I can see that the class "slideshow hidden-xs" gets a display:none on smaller screen sizes and all of your main content is wrapped in that element. If all of your content is not supposed to be wrapped in that element (which I'm guessing it's not) you're most likely missing a closing tag on a div or something.
Find the missing closing tag (ie: /div, /a, etc) and it will probably solve your problem.
You can update the latest version of Joomla and check again that some problem is coming or not. I yes then download new theme for your website which is compatible with your theme.

Twitter Bootstrap navbar only toggles once when logged in

I am building a site in Joomla (unfortunately) for a client. I have installed a template that uses Bootstrap as its basis, with some integration with Joomla, called H5BPTB. The problem I'm having is that when I visit the homepage on a small screen, and toggle the responsive navbar, it works fine, however after logging in, the navbar will open once, then close, but then no longer responds unless I refresh the page.
I read a few references elsewhere on stackoverflow to this being a problem with missing CSS transitions in the .collapse class in Bootstrap CSS. I checked and they are not missing. I also read another answer that suggested that it was a problem with some other Javascript overriding support.transition in the Bootstrap JS. I also can't find a reference to that in any other JS file. Is there anything else this could be?
Also I should add that the navbar works perfectly well in IE, but not in Firefox or Chrome.
Here is the site: http://avantgardeinternational.eu
I'd recommend just trying to update your Bootstrap files in the theme. They're both on version 2.1.1 and as far as I've seen looking around some people have had similar problems with earlier Bootstrap version.
The files you're looking to change are:
http://avantgardeinternational.eu/templates/h5bptb/css/bootstrap.min.css
http://avantgardeinternational.eu/templates/h5bptb/css/bootstrap-responsive.min.css
http://avantgardeinternational.eu/templates/h5bptb/js/libs/bootstrap/bootstrap.min.js
If that doesn't work, I'd try just looking around and making sure that some scripts aren't conflicting, that could just mean disabling all but the Bootstrap JS. Then seeing if it works fine.
http://twitter.github.com/bootstrap/
Edit: Just attempted this, changing the CSS messed with the styles a bit, and it still didn't work. I don't think it loaded the JS into the page properly though, I'll try that now...
Edit 2: So after giving this a shot, I've concluded there is only one explanation now... I've observed the difference between the page when you're logged in and logged out. When you log in there are various other bits of JS that load into the page.
One of these must be overriding Bootstraps collapse methods, thus stopping it from working. There are a few extra scripts that load when you're logged in and some more styles. It might be working trying to remove these and then trying it again.

No spaces in Joomla 2.5 Output

I'm in a pickle. I've designed a Joomla 2.5 site, which I have locally installed. I typically equip my installations with JCE editor for my clients, but at design time, operate in HTML mode. When all the content was in, I decided to test WYSIWYG mode to make sure nothing went awry. Unfortunately, something did. Observe the lack of spaces:
Very interesting that the problem occurs ONLY when saving from WYSIWYG view.
At first I thought JCE was malfunctioning (although the editor itself continued to show spaces), so I tried reinstalling. Then I tried other editors -- CKEditor and TinyMCE. The same symptoms manifested with them as well.
Trying to isolate the problem, I checked the database after pasting in clean markup in HTML view, and again after saving in WYSIWYG view. This is the result:
So, based on the database field, it would appear that the process of saving, in either HTML or WYSIWYG view is working properly... But then why is the output being fed to the browser different depending on which method was used to edit?
So far I've checked entity encoding, CSS (although it's obviously not a CSS issue), and tried installing on another local server. No changes in behavior.
I could really use some suggestions.
Thank you in advance for your help.
Z
PS: This is the latest version of Joomla (2.5.6), running on Apache.
When we typed some text continually this issue was occurred. Actually this was not the issue this problem was solved by using correct css style for that division.
<style type="text/css">#divid {width:750px;word-wrap;break-word;"}</style>
You have to use this css style for your division . Surely this ll resolve that problem...

Resources