HTML Elements Forums Text Boxes Many issues when creating a simple form

This topic contains 5 replies, has 2 voices, and was last updated by  admin 4 weeks ago.

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

    PaoloBax
    Participant

    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:

    
    <style>
    	.width-100 {
    		width: 100%;
    	}
    </style>
    
    <body>
    	<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>
    		<smart-button>Submit</smart-button>
    	</div>
    </body>
    

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

    screenshot

    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.

    #99479

    admin
    Keymaster

    Hi PaoloBax,

    1. The Sample app opens https://www.htmlelements.com/demos/dropdownlist/overview/. 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{
      background:blue;
    }

    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: https://www.htmlelements.com/docs/roadmap/

    5. In general, this is an active project and we make frequent updates with bug fixes and new features.

    Best Regards,
    B. Markov

    SmartHTMLElements
    https://www.htmlelements.com

    #99496

    PaoloBax
    Participant

    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.

    #99504

    admin
    Keymaster

    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

    SmartHTMLElements
    https://www.htmlelements.com

    #99505

    PaoloBax
    Participant

    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.

    #99507

    admin
    Keymaster

    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.