I'm facing an issue with jquery-ui progressbar labels.
I'm trying to do a single code that will handle multiple progress bars, in the fiddle I'm providing you will notice that bars are working perfect but I cannot solve the labels, I always get the last data-width value, when I'm looking to display the value of each one of the bars.
Have a look please: http://jsfiddle.net/jotapee/TRuND/21/
the problem is on this line :
$('.progress-label').text(width.toFixed(0) + "%");
When you set text, BOTH labels with .progress-bar class will be called.
Here is one possible solution : fiddle
In HTML:
<p><strong class="plabel">Master Plan</strong><span class="progress-label index-0"></span>
<p><strong class="plabel">Design</strong><span class="progress-label index-1"></span>
In .js:
$('.index-'+index).text(width.toFixed(0) + "%");
Related
Im using angularjs grid: this component allaways displays only data which fits to page. Suppose I want to have all data displayed at once, even if it takes a few pages (page scrolling is needed to see all data, but without grid scroll).
How to do it?
I played with:
parameter ui.grid.autoResize
trying to overwrite default css
setting.
No result.
Did you tried adding a class to your div. I can see the grid scroll bars if I add a CSS like so. You need to change the below CSS according to your needs.
.grid {
width: 580px;
height: 500px;
}
And here is my ui-grid
<div>
<div class="grid" ui-grid="assetGridData" ui-grid-move-columns ui-grid-resize-columns ui-grid-selection></div>
</div>
Also it will be good if you can have a fiddle for this issue.
One hacky way to make it is to set
gridOptions.minRowsToShow = rows.length + 0.1
0.1 is needed to completely remove the vertical scrollbar of the grid. If 0.1 doesn't work for you, try a higher value like 0.2.
ui-grid-auto-resize worked in my case
I'm trying to create progress bar with text before it, like this:
Progress: [======> ]
but whenever I'm inserting tag with style "display: inline;" after text, jQuery UI progress bar shows wrong results.
Can anyone suggest me how to do it right? Thank you.
However, jsFiddle doesn't show that 'wrong result'. Using Firefox on Linux.
http://jsfiddle.net/gEmsp/
Regards.
Look at this:
[http://jsfiddle.net/gEmsp/1/][1]
Wrap label text in container.
I followed this link to achieve an effect like jQueryUI collapse but it could expand any number of regions.
Then, I used highcharts to render two charts in two of the regions. But only the second chart could show correctly while the first chart couldn't. I set the width and height of the region that the first chart renders to but got the same.
I have wrote two javascript functions to control rendering the two charts separately.
It's strange enough that if I commented out the second function that rendered the second chart , the first chart could show correctly.
Please give me some tips on how to resolve the problem.
The html file like this:
<div id="notaccordion">
<h3>first chart<h3>
<div id="firstchart"></div>
<h3>second chart</h3>
<div id="secondchart"></div>
</div>
The two javascript functions like this:
function render_one() {
...
// set the variable 'renderTo' to "firstchart"
...
}
function render_two() {
...
// set the variable 'renderTo' to "secondchart"
...
}
I have a textbox that I am attaching jQuery UI's Autocomplete functionality to and I am using CSS to give it a max height via the example here. My problem is that doing this causes the z-index problem that bgiframe solves to come back again, but in a different way. The initial autocomplete menu is above all the controls underneath it, but when I begin to scroll the autocomplete menu falls behind them.
Any suggestions?
EDIT:
This is purely an IE6 bug.
As you can see, after scrolling down the autocomplete falls behind the other controls.
I could solve the problem by replacing offsetHeight by scrollHeight in the following line (from jquery.bgiframe.js) :
height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
This change solved the bug for the autocomplete fields with vertical scrollbars. I could not spot any regression in other kinds of dialogs (but I did not run extensive tests).
You need to reverse the z-index order of the form elements (or their containers) using javascript. I.e., "Social Worker" has the lowest, "DX Code" the highest z-index.
You could change the offsetHeight to scrollHeight, like Siggen says, but I have encountered problems when there is only 1 result returned from the autocomplete. The 1 result is squished into a window that only like 2 pxs high.
I found a fix though.
When you have a data.length<2, you should use the offsetHeight, rather than the scrollHeight.
You have to modify autocomplete.js.
Locate this code:
if($.fn.bgiframe)list.bgiframe();
And make it this:
if($.fn.bgiframe){
if(data.length<2)
list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
else
list.bgiframe();
}
Remember, this code should be used in combination with Siggen's fix.
I have used a combination of both parameter for the height like this:
'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'
Look at the max function. Now it is good with no scroll bar (shorter list and longer list as well)
and now the autocomplete component looks perfect in IE6.
I am currently using JQuery UI for several UI elements on my site. Is there a way to make the highlight and error bars thinner?
I am referring to the two things found in the lower-right here.
I imagine there should be a CSS property that I can change to fix this, I just can't seem to find it.
Solution: .ui-state-highlight p { margin-top:3px; margin-bottom:3px; }
On the jQuery page there is a margin on the p tag in the content. It should conform to the content that you are inserting. Can you post the problem you are having.