My quest to to understand how to get data from a text field to email has so far got me nowhere so im now trying a different approach (a workaround to be more precise). I have created a form in HTML, im using the mailto function because this is the only way I can seem to get any data of the iphone to email. My next problem is that because there are appox 300 text fields in total it makes this a very long page. Also, with the email button at the bottom of this html page it creates an annoyance for the user. In some instances only perhaps 4 of the text fields will be used meaning this will be a huge long email for four text boxes . Is there any way i can break it up in to manageable chunks, or dynamically add the text fields as much as the user needs? I realise that the ideal solution would be to do all this properly but its just out of my skills base. I have tried incorporating some controls from cocoa controls for this but couldn't understand how to get that working in my project, hence the use of mailto as a final resort!
Your question isn't very clear, but I'll try to answer. Maybe you should pay attention on the trick like in LiveJournal(line on the bottom of the page).
.buttonClass {
left: 50%;
margin-left: -0.5*buttonWidth;
postion: fixed;
bottom: buttonHeight;
}
In that case your button will be fixed at be the bottom of the page and user could scroll as much as he wants.
Related
I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}
I want a UI that is basically a document having souped-up paragraphs that are (a) editable and (b) each have a column of meta-data/widgets on their left. That is, I want a tree layout that looks like an HTML document, except:
to the left of each paragraph is a column of controls like buttons, state indicators, very short textbox fields (3 chars), and
if you click on a paragraph (or hit an edit button on the left) it morphs into a textarea you can edit; when you are done, you hit a done button on the left (probably the edit button morphed into a done button) and the textarea goes back to being a paragraph.
When you hit edit, some labels in the meta-data on the left should also morph into text areas, etc. and back again when you hit done. Also, I want to be able to hit a button and show only part of the paragraph (imagine a paragraph having a title and a body).
I'm sure I can cobble something together that does this if I hit it over the head with enough HTML tables and GWT Panels, but I'm trying to do this in as lightweight manner as possible, given that such documents of these things may be large, I want it to resize naturally in the browser, and since browsers already naturally lay out things that look like documents I should be able to use very vanilla HTML for most of it.
I've spent several days being frustrated with GWT Panels of various kinds. Ideas?
You should just be able to hide a Label and show a TextArea, and then switch back when you're done editing. Set whatever styles you need to on them - I think a Label comes out as a <div> and a TextArea comes out as a <textarea>. No panels required... just a <div> container to put these two widgets in.
I have an application that generates tables for reports; however during printing - the tables may get split, which causes some of the information to get cut off ( I mean it's only printing the top half of letters and then getting split to the next page ).
I've tried page-break-before ; however that causes every table to be on it's own page. page-break-inside seems to be only supported by Opera (And I'm not even sure if that's what I want).
What I'm hoping to find, is something that if the entire table cannot be fit onto a page - it is pushed to the next; or better yet - if the next row is started on the next page.
Any help would be appreciated!
Use Javascript:
Parse data inpage and reformat
Get table height
If table height > page allowed height = add a new table
Each page fits into:
div.page {
height: 842px;
width: 595px;
}
The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.
This is the only real accurate way I know of configuring a page of data that splits in tables.
I'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)
I have a table with column contents that could be potentially long. From a design/usability standpoint, is it better to wrap the text or provide a scroll bar within the column to view the entire text?
Personally, I think wrapping the text is better. But I wanted to know what have others done in such a situation?
I ALWAYS page my content rather than wrapping or scrolling. It's super easy with jQuery DataTables and it gives the user further opportunities to filter, limit, and sort the data.
This solution also gives you the option to scroll data as well, and to dynamically adjust columns or do show/hides. But I've never gotten to that point. One one of my applications, using Ajax and Pipelining (which are supported by the plugin) it handles 3+ million records without a hiccup. Also, note that it can use jQuery's Themeroller, which can style the table simply and even from the user end on the fly if so desired.
I usually let the text wrap into the cell. But, what do you mean by "potentially long"?
I use a calendar plugin and sometimes the title gets long- i made the decision to break the string in the middle if needed- Supported in CSS3 only- other wise it just wraps
My css
.fc-event-title {
text-wrap: unrestricted;
word-wrap: break-word;
}
and will only happen if mywordisexteremlylong and wont fit properly in a small cell
But this is very extreme so that it does not overflow into the next cell.
But otherwise i dont break the word if there is enough space.