i am writing a hebrew webpage and i need to create a form, the thing is that i need the cells to start from right to left and not from left to right as the default, so when i press the tab button it will go to the left.
i tried the float:right css attribute in the table and tr td but nothing seems to help, when i finally managed changing the cell order all the cells were pressed together.
anyone can please help me specifying the right attributes i need to write.
thank in advance to all the helpers.
Set the layout direction to right-to-left, most naturally with <html dir=rtl>. The dir attribute sets, in addition to directionality of directionally neutral text, the layout order of table columns. So you can write the table cells, containing input elements, in the logical order (first the field to be filled in first, etc.), and the browser will set the cells right to left. So tabbing from the first input field to the second one means going to the left.
Note that dir=rtl will also set default alignment to the right, which is normally appropriate for right-to-left languages.
You probably want to apply the tabindex attribute rather than monkeying with cell order. Also, tables are for tabular data. Is there some reason you're using one for a form?
http://www.w3schools.com/tags/att_global_tabindex.asp
Cue W3schools-bashing. :-)
Related
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
Here I have a manually created table using textboxes inside of a list object:
The problem with this is that if one of the textboxes has too much text only it will grow while the others will remain the same height.
Now the other issue is you can't merge two cells in the same column (vertical merge). Is there a way using a combination of controls that I could replicate what is in the picture such that if the Release Description textbox has too much text in it and it grows the other controls will grow along with it?
Two suggestions:
1) If you want to keep your current workaround, and wish to avoid the growing of your textboxes you can set the CanGrow property to False.
A UI solution for the long text will be using ToolTip: Lets say that your textbox can contain only 60 chars, in the textbox expression use the following:
=iif(Len(Fields!YourField.Value)>60, Left(Fields!YourField.Value,57) + "...",Fields!YourField.Value)
means that only 57 charecters will be displayed in the text box, the full text should be display will hovering the textbox (using tooltip).
2) If you want to merge cells vertically you can do some workarounds.
You can place a table inside another table's cell, that way using several tables you can perform your desired output.
Attaching sample of using table within another table (I use 3 tables):
Is there a way to separate a label from a textbox?
I found that this is supposed to work :
Select the controls
Arrange tab
Remove layout
But the remove layout button is always disabled... Probably cause it's only when you use the tabular or stacked option
Is there any other way to do it, or am I doing something wrong?
Please, don't tell me that I have to copy/paste the label and delete the original one.
Thank you
To move a text box (or any control) independently from its label is to click and drag the control using the large grey box in the top left of the control. This allows you complete freedom of placement between the control and label.
Remove layout only works if you use either tabular or stacked.
Use the square at the top right to move them separately, and select only the label to delete the label.
Just select the one you want to use only, and it can be controlled separately. Also: width, height, top, and left in the properties tab are your friends.
Use remove layout if you can select that little cross.
Use the align buttons to tidy up this mess.
I do not use Access much so I find letting Access create all the labels is quicker, when separating the label from the data I use the following method.
Click the label
Ctrl+C to copy label
Delete to remove label
Ctrl+V to paste label back to form
Drag from top left to roughly the location you want
If you have a column of labels then do the cut/copy/paste/reposition for all of them first, then use the method Fionnuala shows to align all to right.
If the labels are too far to the left or right the use the cursor keys to move.
Again use Fionnuala method to align the rows.
If you find they do not align as expected then Ctrl+Z to step back.
If Remove Layout is not available, select Stacked, which will make Remove Layout available, and then select Remove Layout.
This also keeps things where they are, so less re-aligning afterwards.
I think I've got the right answer. Select the Label and send click "Send to back" on Arrange Tab. Label will be detached. Now move it anywhere as required.
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
It is nice in word processors to create short-term column layouts with documents by using tab key with the defined anchors across the top instead of using tables because you can run overlaps like this.
L R
column a row 1 column a row two
this is the first column! on the right
This allows for overlap, or naturally spanning columns without the need for so much structure. Great when you don't need borders.
Can this layout be done in HTML? I know a tabbed layout can be accomplished on a webpage, what I don't know is if you can set the column locations like you can in StarOffice/LibreOffice/OpenOffice Text or in Microsoft Word.
Using div tags with the float: left and float: right styles, you can achieve this type of structure.