How to Automatically adjust TextArea Height in GWT or Smart GWT - smartgwt

I'm having a problem that others have talked about here. ie How to auto adjust TextArea Height. I saw this answer: Creating a textarea with auto-resize
but I was hoping someone here can translate how to do this in GWT or Smart GWT.

Take a look at SimpleLayoutPanel. It enables you to respond to the browser's resize events.

There's a dedicated sample in SmartGWT for this use case:
http://www.smartclient.com/smartgwt/showcase/#layout_form_filling
If you're using SmartGWT you should not introduce core GWT widgets without a good reason (and there isn't one here obviously).

Related

How to expand components in Vaadin?

SpringBoot 2 Vaadin 12.0.3
I've spent some time watching video tutorials and studying online examples of Vaadin. Unfortunately, so much has changed that options that I was hoping to try are no longer there.
CssLayout is no longer there - replaced by Div which does not expose expand(Component).
component.setWidth("300") has no effect.
component.setWidth("300", UNIT.*) does not work because UNIT is not in class path.
component.setWidth("300px") works but it's far from elegant and setting explicit width on a component which displays text is far from ideal.
I have three pseudo horizontal menu items. On a large screen, they'd be truly horizontal. On smaller screen, I'd like them to go into vertical mode.
Combo Box should expand to the width of the longest label.
Text Box should expand to available real estate. (Available width - Combo Box width - Search Button width)
Search Button should expand to the width of the Icon and Label without any wrapping.
Is this possible to achieve using Vaadin 12 Layout/Component contract or do I have to spend time defining such control in CSS file?
Your question implies that there would have been a trivial way of achieving your use case with the built-in layouts in Vaadin 7 or Vaadin 8 without using CSS. What you're describing about automatically switching between horizontal and vertical modes depending on the screen size sounds like something that would require some degree of responsive layouting, which typically implies directly using CSS.
What you could have done in older versions is to have Java logic that either uses a VerticalLayout or a HorizontalLayout depending on the situation. Those two classes are still available for the same kind of use cases. The APIs have changed to better align with the underlying flexbox functionality, but the overall functionality is still the same.
You could also look in to FormLayout (part of the core framework) or the Board layout (separate add-on) which both provide some responsive functionality. They are, however, originally intended for slightly different use cases (forms and dashboards respectively), so it might be slightly challenging to make them fit your exact requirements.

How to draw a grid of cards/elements with Polymer?

I am an Android developer trying to learn Dart-Polymer(I am also fairly new to HTML dev). I tried the custom card example in the polymer tutorial, and as an extension I want to display multiple cards in a rectangular grid. I see there are horizontal and vertical layouts in Polymer, and I was wondering if Polymer has something like GridView in Android. Can someone suggest how to proceed ?
The grid on left is what I want to achieve :
The core-card is on the right. I can see that element in the designer (please see the panel in right under core). But I am unable to find the core-card in Polymer libraries. That's why I am going with custom card (from the tutorial mentioned above). I would like to use core-card if available.
After posting this question, I found out about core-layout-grid - I am not sure how to use it, and if that's what I need.
Polymer has excellent handling to ease the use of CSS FlexBox. Using the various layout,horizontal,vertical, wrap, and flex attributes it is very easy to make very flexible and responsive layouts, including grids.
You can read more about the Layout attributes and their uses, including various alignment attributes from the Polymer Layout Attributes page. In particular look at the Wrapping section as it helps to create responsive grids that will appropriately adjust based on the width of the display.

How to create a fluent pagination for mobile devices on a responsive website

I want users of my website to use pagination on their mobile devices, like for example UIScrollView with paging enabled in iOS.
Still the website should also be viewable on desktops.
So far, I tried Foundation's orbit, but that just doesn't feel fluent at all (when you release your finger, it performs the sliding a little delayed).
Is there any good alternative on how to get this done? If possible I would like the user to even slide vertically as well as horizontally.
Maybe Swipe.js is the thing you looking for.
have you tried SwipeView?
Here you have an demo gallery
I'm looking for this too, but I really think they are none.
If you want it to be fluid, you have create your own using CSS3 animation/transform and so it will not work on hold browser (IE < 10 or 11, but I'm not sure). If you want to handle touch events I recommend you to check out "jQuery Modile"
You can try iScroll 5 it's quite simple but do the trick perfectly.
You will find in the archive of the project an example of horizontal paging under demos/carousel, you will see it's quite good. :)
In addition you will be able to see all other things you can do with iScroll which should fit your demands.

How to decrease the width using IBAFormSection?

I am using IBA Forms Framework and I cant resize the width of the single section? I cant even find the IBA help on internet.
Like it's been answered here, there is no easy way to resize a single section width. You might want to find an other way to implement your tableView.
IBA Forms Framework is not longer updated. I suggest you to try an other framework such as RETableViewManager, which also provides iOS7 inline pickers.
https://github.com/romaonthego/RETableViewManager

jquery mobile horizontal center without using CSS

I have a div with a grid inside and I want to center it horizontally but so far I haven't found any solution to this problem yet.
I found a couple of solutions but they are all using CSS is there any other way to do this with out using css?just like when centering text you just put text-aign:center?
honestly? no way imo. text-align=center; is css by the way.
Take a look at this page and start learning css, its easy and fun!
http://webdesign.about.com/od/beginningcss/a/aa012207.htm

Resources