Resizing jQueryUI widgets - css

I am relatively new to jquery UI. I am able to understand the functionality and making use of the widgets. However I find the widgets quite large and clunky and would like to resize them. Specifically I am using a large number of spinners, sliders and choice buttons. I would like to resize these to fit my page but can't figure out any way to do this. Please help.

There is a css file that comes with the widget, you can edit it, or you can overwrite the rules in you css file.

Related

How to move a QPushButton inside gridLayout?

I have just tried a simple thing, in designer I created one push button, inside grid layout. The problem is geometry option got disabled in Property box, and I am not able to change the cordinates. In this situation how should I move the push button from its original place if required?
Can somebody help me to achieve this??
You can't move or resize a widget inside a layout because its position and its size are managed by the layout. If you want to manage its geometry yourself, do not use a layout.
Qt layouts are designed to help you make scalable user interfaces. For this, moving or resizing the button is usually done by the layout using sizeHint() and sizePolicy().
I would suggest reading up on how to use layouts and the use of spacers, as this will impact the location and size of your button.
Well I found a solution to that
Break the Layout, arrange the widgets and then set the layout

Difficult in making a separate LAYOUT in GWT java app

i am looking forward to make a welcome screen of my web app like the picture i shown..
here is a pic of example:
http://img600.imageshack.us/img600/4144/1j5h.png
The truth is i have tested many almost all the panels that GWT has to offer, and still i cannot make it.
For example:
The upper header, i made it with a DockLayoutPanel like this:
DockLayoutPanel Header = new DockLayoutPanel(unit.PCT);
header.setStyleName(¨fw¨);
header.setWidht("100%");
header.setHeight("35px");
header.addEast(ingresar,15);
header.addEast(pass,15);
header.addEast(user,15);
Using that panel, i can have all the 2 boxes and the button on the right corner of the screen, and with AUTO-WITDH.
*(even i cannot pad the red button)..
As you can check the horizontal Center Panel has a different style, i create it as Horizontal Panel, but when i do :
header.add(center_panel);
It is useless, the css from header will ofuscate the css from horizontal panel, also i cannot get the box right in the CENTER.
i have zero experience in GWT, i would like if someone can tell me the way, because i am using panels and i am not quite sure that i am using the right ones for this tasks, or the best ones.
THanks very much
Facundo
If you don't have much experience in GWT components try creating the UI with using GWT UI Binder. Its much more similar to creating a layout with html and css. Also you can use most of the html elements such as divs,spans etc.. GWT Uibinder
You can give styles on individual panels like,
for horizontal,
HorizontalPanel hp=new HorizontalPanel();
hp.setStyleName("");

Need Bootstrap's great collection, but need more flexibility

I find Bootstrap insufficiently flexible. For example there's not a straightforward way to change font or line-height properties. I want a one-line method to change these properties.
What else can I use similar to Bootstrap (that I'm sure will not be as rich)? I just need some style collections that are flexible for those kinds of changes.
You can change all of the typography values (and pretty much everything else) on the Customize Page. The links are in the toolbar at the top of most pages of the Bootstrap site.

ul list layout depending on window width

I saw this page where, when you change the window width, the layout change with simple animation. Does anybody know the name of this plug-in so I can look for some tutorials? I tried to look at the source code but I can't find anything useful.
I don't think it's a plugin -- it's probably using media queries, which are a part of CSS3.

Checkboxes with Raphael, svg or html inputs?

So I would like to use some customised checkboxes for my application. I'm not very experienced so I don't really know which way would be the best, but what I've done right now seems somewhat inefficient to me (mainly because I don't know how to copy this button around so each button would require the same amount of code). The button in this jsFiddle is just a simple example, the final might be a bit more elaborate but regardless the point comes through.
The questions are:
1) Which method is best for these type of buttons, Raphael SVG or PNG images with HTML inputs(?)?
2) If Raphael, what would be the best method of producing around 6 of these buttons with different click functions (possibly hover colours would be different too)? I know that creating multiple sets which use same basic variables didn't work.
jsFiddle: http://jsfiddle.net/Wx6vh/2/

Resources