TeamDesk Knowledge Base & Support

   Home      FAQ      Forum      Idea Exchange      Ask a Question      My Stuff      Help   
  
Always centred/centered web forms
Currently with the 4 grid layout as explained here:
New form layout

all forms start from the left and build across the page, 1 column width at a time towards the right.
If there was a choice or an option, I'd prefer to always begin with a form at the centre of a page and for it to alway work its way out equally to left<-->right as required.

In the meantime, I've tried using .css to implement on Web-2-Record forms....with no success.
Does anyone have any way of achieving this?
ID
1407
Category
User Experience
Author

basenine
Date Created
2/10/2021 10:15:43 PM
Date Updated
2/18/2021 7:16:53 PM
Status
New Idea
Score
30
Promoted By
Patricio BustosRobert Gustavssonbasenine
Comments
Philipp Matuschka (MMB) 2/17/2021 10:45:25 AM
With the help of support, I have managed to implement a work around here to make this happen.

I made the form 1 column wide using the full 4 column with

Then in dbstyles I have this
#preview_t_238134 #frm_edit, /* Payments */
#edit_t_238134 #frm_edit,
#preview_t_240910 #frm_edit, /* Invoice Lines */
#edit_t_240910 #frm_edit,
#preview_t_238117 #frm_edit, /* Contacts */
#edit_t_238117 #frm_edit,
#preview_t_238125 #frm_edit, /* My Settings */
#edit_t_238125 #frm_edit,
#preview_t_665093 #frm_edit, /* Registrations */
#edit_t_665093 #frm_edit
{
margin-left: auto;
margin-right: auto;
max-width: 600px;
basenine 2/17/2021 2:00:17 PM
Thanks for this Philipp
I’ll give that a crack and see how I go.
I knew the margin-left/margin-right: auto rule..it was the #edit/preview bits that I couldn’t figure out 👍👍
Thanks again 😊
basenine 2/18/2021 7:16:53 PM
I was able to do this....created my own responsive columns:


* {
box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}

.left, .right {
width: 25%;
}

.middle {
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="column left">
</div>
<div class="column middle">
<script src="https://www.teamdesk.net/secure/embed.js" data-url="/wr-XXXXXXX/db/XXXXXX/webtorecord.aspx?t=XXXXXXX"></script>
</div>
<div class="column right">
</div>
Feedback
 
Back to Search Results