within HTML, 2 forms (each contains a button with an action which is subsequently handled by Perl code) should be placed in one line cause it is a back / next items implementation concerning a result set that is displayed within a table below.
should a table be used to place two forms?
You can place use the CSS rule display: inline-block to position the forms on the same line.
Here is an example:
http://dabblet.com/gist/7428241
You may place the two forms in two separate division (div) elements and position them in one line using CSS.
You can place the forms in separate divs and then float them both left to get them side-by-side.
It's easy.
Example:
<form style="display:inline;"></form> //Form 1
<form style="display:inline;"></form> //Form 2
Related
when i print 3 buttons they are in a single line, but is i print 10, some are shown in a new line? How does this happen. I didnt use a CSS.
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
<p></p>
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>```
Is an HTML page created as a table with rows and columns which are invisible?
No.
Not unless there is an explicit table element.
when i print 3 buttons they are in a single line, but is i print 10, some are shown in a new line? How does this happen.
By default, when multiple things are side by side, they wrap when they get to the end of the line.
It would be very hard to use most webpages if you had to scroll left and right all the time because of a lack of explicit line breaks suited for the window width you are using.
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
enter link description here
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?
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
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 have a bunch of elements (divs) and they represent items. I can delete them by clicking a link and its done through ajax. I had the divs store the value in id however it appears that even though it does work the standard says id names must start with a letter. So i could start it with a letter and remove it when i use ajax or i can store the value another way.
What are ways i can store values in html? I don't think inputs are legal outside of forms but i am rethinking what are good ways to store values.
Best way is to use the new HTML 5 spec to store data in the data-[name] in the div elements
ie
<div data-yourfield="value">
Text
</div>
Then using jQuery find the divs with the selector (reference http://api.jquery.com/category/selectors/)
div[data-yourField=""]
You can store it as text inside the div if you like. You also can use inputs, just add the form tag around everything. Just because it's a form doesn't mean it has to "submit". Inputs or textboxes would probably be the best way to store them actually.