- This topic has 5 replies, 2 voices, and was last updated 5 years, 2 months ago by
.
-
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):
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.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.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.
- You must be logged in to reply to this topic.