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("");
Related
I need to apply a accordion where icon on header is on right side. and can be open and close on click on header.
Clarity also provide a accordion but icon is on left side. I want icon on right side. is it possible ?.
if not the please suggest best way to apply accordion as i am using angular5.
I want this type of accordion (with right side icon)
clarity provide this type accordion
The caret on the left side is a conscious design choice. Having the caret on the right makes eye tracking harder, you need to bounce from one end of the container to the other constantly to see what's expandable and what's not. Since Clarity can't control the width of our containers (it's entirely dependent on the app's use of them), this can be exacerbated on large container of full-page accordions, where the caret can be 800px from the title.
In addition to this, having the caret on the left for all of our components (tree, accordion, datagrid rows, vertical navigation, etc) ensures consistency, making the app easier to use if everything looks and behave the same.
Because of these reasons, Clarity doesn't provide an explicit way to customize the position of the caret. If you still want to go against Clarity's recommendation, you can simply write your own CSS to override Clarity styles to do it, either with absolute position, flex order, or whatever solution works for the component you are using.
Are there any pre-build images that I could use when developing that will display a grid in the background of my browser?
This would make it easier to visualize the layout during development and make sure my design lines up correctly with a grid.
Does bootstrap have anything like this builtin that I can enable in the css?
If I understand you correctly you are looking for something like this?https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg
Apologies if this is not what you are after.
This is probably simple, though I can't find the correct CSS trick to handle this one.
I want to have this kind of button-group (separated with lines, containing a context menu ) in Qt. They must have native look and feel (not like below examples) so the only needed change seems to be removing rounded corners of a QPushButton from its right side (for left-most button), left side (for right most button) and both (for buttons in the middle).
Qt does not support this. You can use CSS to style the buttons like in the example, but you can not use natively styled buttons like this.
If you really need this, the only option I see is to write custom controls for this, with customized drawing code for each OS GUI style you want to support.
You could also try to use standard buttons that overlap and use custom code to paint some kind of line over the overlapping region, but I don't think that would be a good solution.
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I have a webapp that I am making and it has some particular layout needs that are closer to an application than a website.
The layout has:
a left sidebar that is fixed to the left side of the browser window and has a static width until it stacks, this sidebar will have tabs in it
a content area that will expand to a certain max-width and then stop
a right side bar that is fixed the the right edge of the content
I've been struggling to really determine if using a grid system, like bootstrap, would be an appropriate fit for something like this. Having some rows/columns and a collapsible grid in the content area seems like it would make sense, but in the sidebars it seems like its best to not use a grid system at all. I don't particularly like the idea doing some layout in the html with bootstrap3 and some in css.
Basically my app has the same layout as http://qz.com/ and I want similar responsive design breaks, and with that I would like to know if there is one or more css frameworks that support that type of layout with little overriding.
if you have some experience with resposive design and media queries, i would code it myself to avoid the thousands of lines of unnecessary code that comes with frameworks/libraries. bootstrap is great, but it also requires a bit of effort to master, and it would be a bit overkill for this one layout (if i understand you correctly).
if you just need this one layout, i would really recommend you do code it from scratch (personally i'd use something like jQuery and LESS). i hope i understood your question correctly, and sorry if this was not very hands-on.
to sum it up: in my opinion you're probably better off coding it yourself, but bootstrap and other frameworks will provide valuable insight and inspiration for how to do it.