Codename One - span label did not show all content - codenameone

You can see the picture I attached, before the line "List of schools", it didn't show all of the contents on my span-label. Please help me to how to solve this problem.

Make sure one of your roots isn't a flow layout and that the UI is based on a scrollable box layout Y to give it the right size.

Related

How to split screen inside of grid in reactJs

I'm using reactjs and I want to split my grid area in to 2 fields. I tried but couldn't find any better solution. Do anyone know how to do that?
Here is the image and it shows how do I want to make the divided components
this image showing area is also in a grid(half of the screen). If the question is not clear, please inform.

Codename One: How to increase height of dialog

I have developed app using Codename one.I want to set specific height of dialog because my text overidden while displaying message in dialog body .what should I do for that?
Thanks in Advance?
I have added image in which first image is original image and second one is cut image which is displaying on screen while using infinite progress bar. my code is "Dialog ipDialog = new InfiniteProgress().showInifiniteBlocking(); ipDialog.Dispose()" I want whole image on screen like original image.
can you help me to solved this ?
You can use the Dialog show method that accepts int values to determine the distance from the edges. But normally this is a matter of the text sizing and dialog construction.
Also make sure you are showing the Dialog from the EDT thread.

How to get Codename One Form feature vertical scroll?

My Codename One app features a Form with 3 SpanLabels containing text and one Container in LayeredLayout with an image and an overlay.
this.add(BorderLayout.NORTH, spanLab1);
this.add(BorderLayout.CENTER, imageCont);
this.add(BorderLayout.SOUTH, BoxLayout.encloseY(spanLab2, spanLabl3));
This yields to the following:
This is not satisfactory as the image (that appears in the center and should be CN1 icon) is not scaled but cut because it is not possible to scroll down.
I tried to force the Form to be scrollable (this.setScrollableY(true)) without success.
Did I make a mistake somewhere, for example should all my content be placed in the BorderLayout.CENTER since according to the documentation the NORTH position is dedicated for the title and the SOUTH one for an optional menu bar (I tried this without success)?
Or should I show a Dialog instead (that offers Y-Scroll out of the box) ? What is actually the proper way to show all my (long) content with no picture cut or text overlaping ?
EDIT December 22nd 2016
As #Tizbn wrote the Form's ContentPane has to be in Vertical BoxLayout. So the call to the parent constructor has to be written :
super(new BoxLayout(BoxLayout.Y_AXIS));
Thank you very much for any help!
Vertical Scroll is disable in BorderLayout . For that BoxLayout with Y-axis can be used and make setScrollableY(true) in the Boxlayout. Hope it will help .

Polymer grid in different views

I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.

Isotape responsive layout with toggles and unknown heights

I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen

Resources