Input fields together with Materialize rows and columns #54

anton-johansson · 2015-07-08T09:00:25Z

Hi! I have an issue regarding the indententation of some input fields (MaterialTextBox for example). If you compare your examples with materializecss' examples, you can see that there is a small difference in the indentation of the placeholder.

In materializecss' examples, they have this:

<div class="row">
    <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email" data-error="wrong" data-success="right">Email</label>
    </div>
</div>

To simulate this, I'd do this in my *.ui.xml file:

<m:MaterialRow>
    <m:MaterialColumn grid="s12">
        <m:MaterialTextBox ui:field="txtTest" placeholder="Test" />
    </m:MaterialColumn>
</m:MaterialRow>

However, this turns into:

<div class="row">
    <div class="col s12">
        <div class="input-field">
            <i></i>
            <input type="text" class="gwt-TextBox validate" id="101">
            <label for="101">
                <div class="gwt-Label">Test</div>
            </label>
        </div>
    </div>
</div>

This extra div makes it look no different than before (i. e. it looks exactly as your example). But it makes sense, because that's how I structured my UiBinder.

One idea how to solve this is to have a grid-property on ALL material input fields. Something like this:

public void setGrid(String grid) {
    this.grid = grid;
    addStyleName("col");
    addStyleName(grid);
}

This way I can design my UiBinder like this:

<m:MaterialRow>
    <m:MaterialTextBox ui:field="txtTest" placeholder="Test" grid="s12" />
</m:MaterialRow>

I've tested this in my own code and it works perfectly, atleast for MaterialTextBox and MaterialTextArea. I tested on MaterialListBox, but I got some trouble with a slightly misplaced caret. I had a hard time finding a solution, since the HTML you get from MaterialListBox does not match the HTML in the materializecss examples.

Ideas, thoughts?

kevzlou7979 · 2015-07-08T09:22:29Z

Ok I agree with this we can set up a grid attribute for every input fields.
You can pull a request on this :)

anton-johansson · 2015-07-08T09:23:34Z

Allright. I will investigate some more about the other components first, for example about the issue mentioned above with MaterialListBox.

slugmandrew · 2015-07-31T00:02:54Z

@anton-johansson We are currently discussing rewriting elements to render the exact same css as materializecss.com, so this will probably be done in a future release. Hopefully in the next couple of weeks.

anton-johansson · 2015-07-31T08:11:07Z

Sounds great! Nice work with the milestones, it helps people getting a visual on how things are progressing. :)

kevzlou7979 · 2015-08-20T03:50:23Z

Ok now specific gwt material elements supports grid : (Just add grid="s2 m2 l2" to the uiBinder element then it will work pretty well)

Grid Column Support:

Autocomplete
Card
CheckBox
Collapsible
Collection
Date Picker
Time Picker
Image
Label
Link
ListBox
Radio Button
Switch
Text Area
Text Box
Video

kevzlou7979 · 2015-09-08T15:20:32Z

OK we will add the remaining widget icons and buttons then we can close this

fredrickRoyal · 2016-02-12T23:40:51Z

Hi i have this error in version 4
[ERROR] Unexpected text in element: "?": <m:MaterialRow>

kevzlou7979 · 2016-02-13T00:15:40Z

@fredrickRoyal Please provide your code snippet.

fredrickRoyal · 2016-02-15T06:41:22Z

Hi i found out from your code at git.

On Sat, Feb 13, 2016 at 3:15 AM, kevzlou7979 notifications@github.com
wrote:

@fredrickRoyal https://github.com/fredrickRoyal Please provide your
code snippet.

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

fredrickRoyal · 2016-02-15T06:47:57Z

Can u Please update for us the showcase.. Its so confusing when we see
version 1.4.0 yet on maven repo. its 1.4, then the code snippet are not
correlating.. they are all the same for all versions. please update us with
new links to new versions.
thank you for the innovation. we were struggling with smartgwt, senchaGWT,
the worst is gwt plain.. thank you very much. Can we also borrow some
things from polymer boys?

On Mon, Feb 15, 2016 at 9:41 AM, Kasoma Fredrick kfredrick35@gmail.com
wrote:

Hi i found out from your code at git.

On Sat, Feb 13, 2016 at 3:15 AM, kevzlou7979 notifications@github.com
wrote:

@fredrickRoyal https://github.com/fredrickRoyal Please provide your
code snippet.

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

kevzlou7979 · 2016-02-15T06:51:55Z

Please follow this http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#!gettingstarted

fredrickRoyal · 2016-02-25T06:32:33Z

thank man..
i am developing my application based on gwt-material and its so good.
I will send you a link after uploading.

On Mon, Feb 15, 2016 at 9:51 AM, kevzlou7979 notifications@github.com
wrote:

Please follow this
http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#!gettingstarted
[image: version_table]
https://cloud.githubusercontent.com/assets/3138071/13041589/a4b5cc66-d3f3-11e5-9293-f4b5d5004e39.PNG

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

fredrickRoyal · 2016-02-25T06:35:32Z

Send me a like of both show case and demo for version 1.4.1.
Im using maven so am likely not to use 1.5.0 until it stabilizes.
Thank you.

On Thu, Feb 25, 2016 at 9:32 AM, Kasoma Fredrick kfredrick35@gmail.com
wrote:

thank man..
i am developing my application based on gwt-material and its so good.
I will send you a link after uploading.

On Mon, Feb 15, 2016 at 9:51 AM, kevzlou7979 notifications@github.com
wrote:

Please follow this
http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#!gettingstarted
[image: version_table]
https://cloud.githubusercontent.com/assets/3138071/13041589/a4b5cc66-d3f3-11e5-9293-f4b5d5004e39.PNG

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

fredrickRoyal · 2016-02-28T13:17:02Z

Hi how do u do file upload with gwtmaterialdesign..?
i mean the wigdets to use
thank you.

On Thu, Feb 25, 2016 at 9:35 AM, Kasoma Fredrick kfredrick35@gmail.com
wrote:

Send me a like of both show case and demo for version 1.4.1.
Im using maven so am likely not to use 1.5.0 until it stabilizes.
Thank you.

On Thu, Feb 25, 2016 at 9:32 AM, Kasoma Fredrick kfredrick35@gmail.com
wrote:

thank man..
i am developing my application based on gwt-material and its so good.
I will send you a link after uploading.

On Mon, Feb 15, 2016 at 9:51 AM, kevzlou7979 notifications@github.com
wrote:

Please follow this
http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#!gettingstarted
[image: version_table]
https://cloud.githubusercontent.com/assets/3138071/13041589/a4b5cc66-d3f3-11e5-9293-f4b5d5004e39.PNG

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

Fredrick KasomaSoftware DeveloperPlanet Systems (U) LtdPlot 170 Semawata
Road-NtindaP.O.Box 3761 Kampala UgandaTel: 0700
<0704901261>-408387Email:fkasoma@planetsystems.co
http://www.planetsystems.co:2095/cpsess938237924/3rdparty/roundcube/?_task=mail&_action=show&_uid=193&_mbox=INBOX&_caps=pdf%3D1%2Cflash%3D1%2Ctif%3D0#NOP
Email:kfredrick35@gmail.com Email:kfredrick35@gmail.com

"No Burden Bearer Carries Burden of the other"

gilberto-torrezan · 2016-02-29T17:00:51Z

Hi @fredrickRoyal
With you have any questions about the project, please talk to us at the gitter chat room, or if you find any other issues not related to this one, please open a new ticket ;-)

fredrickRoyal · 2016-03-01T06:35:41Z

@gilberto-torrezan let me try it out.
thank you in advance.

shadabgaurft · 2016-04-05T04:57:32Z

Hi All, I am working on a project and trying to use GWT Material Design 1.4.1.
Could anyone please share any working full example. It will be a great help!
My login sample was working fine with MaterialDesign 1.3.3 version but not with 1.4.1.

Also, please share any link to refer proper sample examples. Thank you very much.

slugmandrew added the bug label Jul 31, 2015

slugmandrew self-assigned this Jul 31, 2015

slugmandrew added this to the 1.3.5 milestone Jul 31, 2015

kevzlou7979 mentioned this issue Aug 20, 2015

Support GRID Column on specific Material Widgets #68

Closed

kevzlou7979 added the ready label Aug 20, 2015

kevzlou7979 closed this as completed Sep 23, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Input fields together with Materialize rows and columns #54

Input fields together with Materialize rows and columns #54

anton-johansson commented Jul 8, 2015

kevzlou7979 commented Jul 8, 2015

anton-johansson commented Jul 8, 2015

slugmandrew commented Jul 31, 2015

anton-johansson commented Jul 31, 2015

kevzlou7979 commented Aug 20, 2015

kevzlou7979 commented Sep 8, 2015

fredrickRoyal commented Feb 12, 2016

kevzlou7979 commented Feb 13, 2016

fredrickRoyal commented Feb 15, 2016

fredrickRoyal commented Feb 15, 2016

kevzlou7979 commented Feb 15, 2016

fredrickRoyal commented Feb 25, 2016

fredrickRoyal commented Feb 25, 2016

fredrickRoyal commented Feb 28, 2016

gilberto-torrezan commented Feb 29, 2016

fredrickRoyal commented Mar 1, 2016

shadabgaurft commented Apr 5, 2016

Input fields together with Materialize rows and columns #54

Input fields together with Materialize rows and columns #54

Comments

anton-johansson commented Jul 8, 2015

kevzlou7979 commented Jul 8, 2015

anton-johansson commented Jul 8, 2015

slugmandrew commented Jul 31, 2015

anton-johansson commented Jul 31, 2015

kevzlou7979 commented Aug 20, 2015

kevzlou7979 commented Sep 8, 2015

fredrickRoyal commented Feb 12, 2016

kevzlou7979 commented Feb 13, 2016

fredrickRoyal commented Feb 15, 2016

fredrickRoyal commented Feb 15, 2016

kevzlou7979 commented Feb 15, 2016

fredrickRoyal commented Feb 25, 2016

fredrickRoyal commented Feb 25, 2016

fredrickRoyal commented Feb 28, 2016

gilberto-torrezan commented Feb 29, 2016

fredrickRoyal commented Mar 1, 2016

shadabgaurft commented Apr 5, 2016