[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS printable forms: making lines that expand automatically across a page

Posted on 2006-05-29
5
Medium Priority
?
662 Views
Last Modified: 2008-02-26
I have been tasked with using CSS to creating printable forms. The only difficult thing I have run across thus far is creating lines on that page that automatically expand. For instance:

My Name: __________________________________________________
My Address: ________________________________________________


I want each of the lines to end at the margin without needing to specify a width for the lines. I have tried using divs, but when you specify display:inline; it wont automatically expand. I have tried using input type=text and used CSS to format the fields appropriately, but using width 100% breaks the line on a new line.

Since there are many of these forms and they will require some maintenence I do not want to have to specify a length for each of these lines.

Anyone have a reasonable solution?
0
Comment
Question by:KoldFuzun
  • 3
  • 2
5 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16784934


Believe it or not, I don't think you can do this in css.    I hope one of the oher css gurus can prove me wrong cause this is awful.

Two other (bad) options :

- You can use a *series* of 100% width tables with first cell set to nowrap:

<table width="100%" border="1">
  <tr>
    <td style="white-space:nowrap;">test test</td>
      <td width="100%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
    </tr>
</table>


- Javascript to find the width of a span containing the label  and then calculate the remaining width for the adjacent div with a line.
0
 
LVL 2

Author Comment

by:KoldFuzun
ID: 16785023
I tend to agree with you. Ive been doing HTMl/CSS for a lot of years and if I recall this isnt the first time I've run across this issue. Surprising there isnt an easy solution for this considering how common it is becoming to generate printable forms from the web. Thanks for the input, lets hope someone else is smarter than me :).

I dont think Javascript is really an option though, as I am using the CSS/HTML to generate a PDF and to date I have had little success in formatting the files using Javascript.
0
 
LVL 2

Author Comment

by:KoldFuzun
ID: 16785052
oh I also wanted to point out that using a seperate cell for yher form field name and the form field itself is probably not ideal. the main reason is I am trying to mimic existing forms and sometime the look like so:

My Name: __________________________________________________
My Address: ________________________________________________
My Drivers license: ____________________ SS#: _________________
My Birthday: _______ Free Beer Day: ___________________________

As you can see, the fields will rarely line up..... :(
0
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 2000 total points
ID: 16785601


Well you need a different table for each line like the following. It's ugly but it does what you want. A fundamental problem with css is that there is so little control of the width of inline containers.

<table width="100%" >
<tr>
<td style="white-space:nowrap;">My Name: </td>
<td width="100%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
</tr>
</table>
<table>
<tr>
<td style="white-space:nowrap;">My Address: </td>
<td width="100%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
</tr>      
</table>
<table>
<tr>
<td style="white-space:nowrap;">My Drivers license: </td>
<td width="50%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
<td style="white-space:nowrap;">&nbsp;&nbsp;SS#: </td>
<td width="50%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
</tr>      
</table>
<table>
<tr>
<td style="white-space:nowrap;">My Birthday:  </td>
<td width="50%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
<td style="white-space:nowrap;">&nbsp;&nbsp;Free Beer Day: </td>
<td width="50%"><div style="border-bottom:1px solid red;">&nbsp;</div></td>
</tr>      
</table>
0
 
LVL 2

Author Comment

by:KoldFuzun
ID: 16786697
agreed. however your solution seems to work pretty good. I guess it means doing what I didnt want to do: add a lot more table cells to the table :) I think we will both agree that there should be a pure CSS solution for this.

Thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month19 days, 11 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question