Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #99478

    In my effort to test your widgets, I tried to create a simple form made of a div which contains, in order, a smart-text-box (“host”), a smart-numeric-text-box (“port”), another smart-text-box (“username”), a smart-password-text-box (“password”) and a smart-button (“submit”).
    This is my code:

    	.width-100 {
    		width: 100%;
    	<div style="margin: 20px; margin-top:100px; background-color: #FFCC00;">
    		<smart-text-box class="width-100" id="login-host" label="Host" hint="host hint"></smart-text-box>
    		<smart-numeric-text-box class="width-100" id="login-port" label="Port" hint="port hint"></smart-numeric-text-box>
    		<smart-text-box class="width-100" id="login-username" label="Username" hint="username hint"></smart-text-box>
    		<smart-password-text-box class="width-100" id="login-password" label="Password" hint="password hint"></smart-password-text-box>

    This is the end result (I applied some margin and a yellow background to the main div):
    As you can see:

    • the label and hint on the widgets seem to float around, so they overlap (like the “username” label and the numeric input) or are outside the actual form area (the “host” label);
    • the label and hint of the numeric-text-box have a different style (color) than those of the text-box;
    • the text-box background is transparent, while the other inputs have a white background;
    • the label and hint of the password-text-box have a different style (color; font size) than those of the text-box;
    • the label of the password-text-box is above the input, and the entered text is not aligned with the border.

    I’m aware that the styling issues can be fixed with a little css coding on my part, but I think a commercial product (well, actually any product) should be at least congruent. I could also live without those label and hint properties, but then why adding them if they don’t work?
    I checked the demos page. Among the “Sample applications”, you have a Form demo. Clicking it, it opens the DropDownList documentation which actually shows a couple of forms. Unfortunately they are fake forms, because the source code shows their fields are simple span tags (except for the dropdown lists).
    I’d like to have a word from you on the state of the project. Are the issues going to be fixed? Do you have a release roadmap?
    Thank you.


    Hi PaoloBax,
    1. The Sample app opens This is not a Fake form. This is a sample built with our web components.
    2. Styling of the Web Components is done in smart.default.css. If you would like to put custom CSS, take it into account that such style could be already defined. In your case, to put custom Background of these Inputs, you should use something like that:

    smart-numeric-text-box .smart-input,
    smart-text-box .smart-input,
    smart-password-text-box .smart-input{

    3. Hints and Labels are not yet supported. We will add support for these in future versions of our web components. I would suggest you to take a look at the demos and how we use the components.
    4. The roadmap is available here:
    5. In general, this is an active project and we make frequent updates with bug fixes and new features.
    Best Regards,
    B. Markov


    1. Can you please show me the code where the forms are created on that Sample app? In the source code at the bottom of the page I can’t locate any smart-text-box or similar.
    2. I know how to change the style. I just don’t understand why, by default, similar widgets (which usually are side by side in forms) have different styling.
    3. Actually labels are listed among the features in the TextBox overview page. In any case, even if I don’t use labels and hints, the layout has some issues, as you can see in the next picture. I can’t figure out where that extra space after (or before?) some inputs comes from.

    Any help to create that simple form is much appreciated.


    Hi PaoloBax,
    1. The Sample App is about DropDownList, not about TextBoxes. It is not a Form Sample App, it’s a DropDownList sample app.
    2. Here’s a sample with a Form:

    3. Hints and Labels are an experimental feature. We did not demonstrate them in our demos.
    Best Regards,
    B. Markov


    1. As mentioned before, if you go to the main page of the demos, scroll down to “Sample Applications”, you have a “Form” application listed. But that leads to the DropDownList demo page, where all the forms are just mock-up forms. That’s misleading.
    2. It seems that setting “display:block” on all the widgets in the form is mandatory, otherwise you end up with strange, uneven spacing like in my pictures. Thank you for pointing out. Maybe you could add a document describing how to create a proper form.
    3. I see. I guess I was mislead by the fact that the TextBox overview page shows the label in one of the animated gifs (see below) and the API page has both label and hint properties listed, without being mentioned that those are experimental features only.


    Thank you cor pointing out things we should improve in our web components and in our documentation. We will do our best to resolve these as quickly as possible. Some of the documentation pages are actually already updated today – introductiom, accordion, button and calendar docs.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.