question

MalamMalam-4042 avatar image
0 Votes"
MalamMalam-4042 asked YijingSun-MSFT answered

Formatted asp page - Form

I would like to create a page like the one attached; tried it different ways using css but still not been able to get it to render it correctly.
How do I do it to display like this?

174909-form.png


dotnet-aspnet-webforms
form.png (2.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe avatar image
0 Votes"
AgaveJoe answered MalamMalam-4042 commented

It is helpful if you provide what you've tried.

     <style>
         #MyTable {
             width: 60%;
         }
    
         #MyTable td.bottomBorder {
             border-bottom: 1px solid black;
         }
    
         #MyTable td.nowrap {
             white-space: nowrap;
             width: 10%;
         }
    
         #MyTable td {
             line-height: 2em;
         }
     </style>


Simple table

     <table id="MyTable">
         <tr>
             <td class="nowrap">First Name:</td>
             <td class="bottomBorder"></td>
             <td class="nowrap">Last Name:</td>
             <td class="bottomBorder"></td>
         </tr>
         <tr>
             <td>Address:</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
         <tr>
             <td>City:</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
         <tr>
             <td>Notes:</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td class="bottomBorder" colspan="3"></td>
         </tr>
     </table>
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I need to be able to enter information in these fields on the form.

0 Votes 0 ·
MalamMalam-4042 avatar image
0 Votes"
MalamMalam-4042 answered

Thank you so much!

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MalamMalam-4042 avatar image
0 Votes"
MalamMalam-4042 answered

I need to be able to enter information in these fields.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe avatar image
0 Votes"
AgaveJoe answered AgaveJoe edited

I need to be able to enter information in these fields.

Use standard inputs and remove the input borders using CSS. I don't know of any styling that can produce the double and triple lines in your example. But there is nothing stopping you from looking around on the internet.




5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MalamMalam-4042 avatar image
0 Votes"
MalamMalam-4042 answered AgaveJoe edited

When I use standard input like textbox or input box then I don't get the nicely formatted aligned screen
The double and triple lines can be replaced with Textbox controls but, again, I don't get the format I am looking for.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

When I use standard input like textbox or input box then I don't get the nicely formatted aligned screen The double and triple lines can be replaced with Textbox controls but, again, I don't get the format I am looking for.

You did not share any code so I have no idea what you're doing. I recommend taking the time to learn HTML and CSS basics. There are literally tons of HTML form examples on the internet.

https://getbootstrap.com/docs/4.0/components/forms/






0 Votes 0 ·
YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @MalamMalam-4042 ,
If you need nicely format, there are two ways:1. using css to align the center 2. use Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Please tell us what do you want to do and if you can't get the nicely format by yourself, post your current codes to us.

Best regards,
Yijing Sun


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.