How to align elements inside a form - css

Calling out to css masters at SO!
I have a form that's created with gravity forms.
The logical order of all input fields in the code is
1) Radiobuttons
2) All string/text inputs
3) textarea
I'm trying to make it so that a tab from radiobuttons leads the user to the textarea, and then to the other text input fields but that messed up the looks =\
Any ideas on what I could do?

Try keeping your original layout, but use tab order to set the order in which the tabbing happens:
http://webcheatsheet.com/HTML/controll_tab_order.php

Related

Is it possible to set a drop down widget to be required?

Was wondering if it was possible to have a drop down widget in app maker be required. In other words, users could not click submit unless they had selected a value from a down down menu. Kind of like how validation on text boxes.
When looking at the property editor for a drop down widget I don't see anything that will allow me to set the above requirement out of the box.
Below is the property editor for a drop down, you will notice there is no validation options.
Below that is the text box property editor with the validation option expanded. I basically need the same functionality for my drop down menu.
If anyone dealt with a similar issue I would appreciate any input.
Of course you have that option.
Look under DropDown menu you will find option called allowNull, deselect that option. Also select validationDisplay check box from 'Other' menu and users will have to choose from a drop down menu always.
Below are the screen for your reference,
Dropdown menu allowNull option,
Other menu validationDisplay option,

Powerbuilder Excel-Cell like edit functionality on Datawindow Grid

I've been given a very unusual request of emulating excel-like editing functionality for my grid.
Here's the scenario: The users would like to be able to immediately change the content by clicking on the cell and typing whatever they wish. Currently, they have to double click on the cell to block select the content, and then type in their desired text to overwrite the cell contents. They'd like the intermediate step of double clicking to block select the text to be taken out. The editable cells hold only numbers.
So I have two options:
1. Automatically block select the cell contents as soon as the user clicks on it
2. Make the cell selection/edit behave the same way as excel
Given Powerbuilder's inherent limitations, I'm fairly convinced this is impossible without some wacky hack, but I'd like to hear ideas.
PowerBuilder does handle this with ease but you can look like a hero to your end-user now.
:)
Auto Select Text in Datawindow Edit Fields
In your datawindow painter, choose the column, then check the "auto select text" property. This will cause your text to be selected as soon as the field gets focus. Now the problem is that PB doesn't provide this feature for edit mask controls but you can get around that yourself using the below example.
Auto Select Text in Edit Mast controls in Datawindow
Add code to your datawindow control that checks for an edit mask field and highlights the text. The example could be put into the itemfocuschanged event of the datawindow control, or in your datawindow control ancestor.
// only if row present
if row > 0 then
if describe( dwo.Name + '.Edit.Style' ) = 'editmask' then
// we found an edit mask so select the text in it
this.selecttext(1,len(string(getitemstring(row,dwo.Name))))
end if
end if
Did you try the Auto Selection edit property?

ASP.NET typing text vs using label

What's the difference between typing some text on a page vs inserting a label and typing some text into that label ?
Any reason why somebody would want to use a label vs just type text on the page ?
The only advantage that I can think of is that a label can be updated easily ( e.g user clicks a button , in the event code for the click action one can write something like label1.Text = "some value" )
Thanks
Labels can be associated with controls using the AssociatedControlID property, allowing the user to click the label to focus the control.
If a label is associated with a checkbox, clicking the label will toggle the checkbox.
You've nailed it. Putting text inside a label control allows you easy programmatic control over that portion of the page, while putting it directly in the HTML requires you to then jump through extra hoops if you want to modify it later.
In addition, you can also programmatically show/hide a label, add css styles, and associate it with an input control (AssociatedControlId property).
You can't easily apply CSS styling to random text on the page.
Edit - Sorry I meant in server side code.
The difference is that typing into a Label causes it to render the HTML from the server side while typing text into the HTML does not.
This is very useful if you want to change the text dynamically or if you need to deal with changing the text for internationalization.
ASP.NET labels should be used to much like HTML labels: to indicate which control this text is related to. ASP.NET also has the LiteralControl, which is just text, and is better suited to your needs.
Typing text directly onto your page is often uncontrollable - It is difficult to control where it will appear, and in what manner. Labels have very predictable features that can be adjusted easily to work with formatting. Furthermore, as your page gets more complicated, having text in labels that is identifiable with IDs makes things significantly easier.

Using the Tab key to navigate form inputs

I am having some problems with tabbing within my asp.net pages. This project was developed with Visual Studio 2008.
Case 1
I have two html tables. The first table has two rows; the second table has four rows. Within the cells are of each table are asp.net fields, text boxes and radio button lists. I set focus to the first field of table one. I then press the tab key multiple times. The focus moves through the field of table one and then through the fields in the first row of the table two. Then instead of goes to the second row of the table two it return to the table one.
But if I set focus to the last cell on the first row of table two, it tabs through the remaining cells of table two properly. Can you tell me how to get the tabbing to behave properly and go to the cells in there natural order? Note that I am setting the tab index property in the order that I want.
Case 2
On another page I have an html table with a single row followed by a gridview control. The gridview control is writeable and has the following columns: Check Box, Radio Button List, Text Box, Text Box, Text Box and a Check Box List. If I click on one of Check Box, Radio Button List or Check Box List., then press tab, the cursor pops out of the grid and sets focus on the first field of the table outside the grid. But if I set focus on one of the text boxes and tab; then the tab goes through the fields of the grid left to right one row at a time. This later behavior is what I want in both cases. I don’t know why my cursor pops out of the grid when I start with a field other than a text box.
Please help if you can.
Bob
funny, you explain in details your case but you didn't explain what it needs to be explained in order to someone can understand you :)
first of all, is table1 located in the first tab and table2 in second tab?
what do you used for tabs: asp.net tab control, jquery ui tabs...?
what do you mean by 'press the tab key multiple times'? same tab? do you have postback on tab click? what is the focus in your case, and so on and on...
cheers
Have you checked the order of the input elements in your HTML? Generally the tab order follows the order of controls.
If that all looks right, then make sure nothing is setting the TabIndex property - as this will also mess up the tab order.
I pretty much resolve this and I wanted to add the answer for anyone who viewed this thread. The problem was the autpostback on certain fields. Once I disabled autopostback, the problems went away.
Bob
You need to use Javascript and I referred for your a very good example of navigating through Gridview rows with Up/Down keys.
http://www.codeproject.com/Articles/25675/GridView-Rows-Navigation-Using-Arrow-Up-Down-Keys

Disable highlighting in an HTML SELECT box

I have a select box, <select multiple=true, that the user populates with values via a Picklist mechanism. I would like to disable highlighting in this box because, by definition, the values in this box are the selection.
Just to clarify, I am NOT referring to text selection, which is what ::selection operates on. I'm talking about the usually blue highlighting that the browser applies to selected line item(s) when the user clicks on them.
I'm not worried about the user blindly clicking around, because I am auto-selecting all items onsubmit so that all the values get sent.
Why not just list the items in their own div instead of a select element? You aren't having the users interact with them anyway, right?
Then, you can have a select element w/ all the values you want, but make it hidden via CSS so that the user won't ever see them. It'll just be there in your form so that you can grab those values on your submit.
If I'm reading you correctly, it sounds like you're using an accumulator model where you have a "source" box (or list or select or something) and a "selected" box. Rather than accumulating into a [select], maybe use a div? If you must use a select, you could try disabling it, but that carries other visual baggage. You could also try styling the select color, but that's definitely not going to be cross-browser.
Make it disabled?
<select disabled="disabled">
This would gray it out, unfortunately- the other option might be some javascript to unselect any selections.
if i understand you correctly, the user does not actually selects the items? then why not either disable it or if customer still interacts with it, you might need to go with some JS code to help yourself

Resources