how to change jquerymobile ui-blocks height and width - jquery-mobile

am using jquerymobile for representing a two column radiobuttons in my project, the problem am facing is the contents of the block-a is lengther than the contents of the block-b so am getting a difference of div size the output is at (http://i40.tinypic.com/r0tt85.png) if u can lookat my out put the second question 6th option is small when compare to all the other ones the block size is based on the content how can i make same size for all the blocks without based on the content any help please needed

If you want all blocks to be the same height, you can set the height in CSS:
.ui-bar {
height: 100px !important;
}

Related

Highcharts gauge fill to 100% of container

This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
By setting the spacing to zero, you can fill the entire space:
http://jsfiddle.net/mkremer90/3sngK/1/
Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.
I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.
The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.
Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".

What is the optimal icon size for XPages Mobile Control line items in views?

I have been adding icons to my mobile control Line Item controls and haven't quite figured out what the preferred size of these icons should be. The CSS has max size settings of 35 by 35px.
The reason I ask this is because the icons don't seem to line up correctly. The CSS positions them at 0 0. If all else fails I may modify CSS and position them to something other than 0 0.
Still interested in hearing how you have dealt with this.
In the teamroom template, the mobile view for Recent Activity has icons that line up with the text. All these images are 16 X 16px.
There will never be 1 fit for all, the layout will be dependant on font size, row height and where you want it to line up. Some people may want it to align in the middle vertically and others will want it to align with the title in the row.
I would say 21px x 21px. but that depends on what font-size you are using.
Icon size can depends upon the applicaton. Normal size is 32x32 and an extended icon size is 64x64. If you want to line up the icons, you might have to change the icons to a standard size.

jquery gradient image height

I am new to jQuery I am facing a some problem with jQuery gradient image please give me some solution for this
I have one div divided vertically in three part left, middle,right.The div has a background images (that is gradient) .and there is some data in the div. I want that the image height should be increase when the user input more data in the div
Can we increase the height of the gradient image using jQuery. Please give me some reference site or some solution
I don't know that you need JQuery to do this for you; it will be fun to do it on you own.
As you know, you can style the div such that its height will increase as you add more content to it. So your question really is how to make the gradient background appear the way you want it: you might want the gradient to grow lighter and lighter at the bottom, say, as the div increases in height. It just so happens (lucky you!) that background-image CSS is rich and capable. That's why it's fun: it actually works!
Read about CSS background-position for some ideas. You might find that the effect you want is automatic.
-- pete

SIFR 3 text resizing to fit width

I'm using sifr 3 and trying to fit h1's on a single line but within a set width of 400px. By default, if there's too much text, it drops onto the next line. I've used forceSingleLine: true but then the text just stretches across the 400px width. Is there a method which will resize the text to fit in the width AND stay on a single line?
Thanks
This was the behavior of sIFR 2, which resulted in inconsistent font sizes. This has been fixed in sIFR 3, so what you're trying to achieve is only possible in sIFR 2.
But what about the sIFR3 attribute "fitExactly", then?

How do i get sIFR 3 to align right and use the full width

Well like i stated in the title, i cant get sifr to align right and use the full width of the containing h3 tag. Aligning text to the right works well, but i want the text to be on 1 or 2 lines instead of 3 and how it looks the text should perectly fit on 1 or 2 lines :/.
Link: http://hendriks.adena.nl/preview/html/?p=kerst
Anyone got any thoughts on this problem?
Niels
The issue is that the width of the sifr elements is determined based on the width of the original text content that is in the a tags within the h3 tags (check your page with javascript off to see the difference in width).
So one simple solution should be to give these a and/or h3 an explicit width - my guess is that sifr will use that with. (Maybe you can also use 100%, I'm not sure about that)

Resources