HOW TO show error alerts at the right side in default style?

Discuss everything related to FormBuilder. All versions. Any questions related to the FormBuilder developing or using should be posted to this forum.

Moderators: alexandrleonenko, goas

Site Admin
Site Admin
Posts: 6180
Joined: Jan 7th, '09, 23:18

HOW TO show error alerts at the right side in default style?

Postby administrator » Jun 23rd, '13, 16:36

To show error message sat the right style you have to add some changes:
error-messages.png (12.4 KiB) Viewed 5698 times

Here the example that may be used to show it (generally you have to align error message with float:left; to show the Label, Field and Message in one line):

Code: Select all

.field_group        { margin: 4px; border:1px dotted #eee; background-color: #fff; }
.label              { display: inline-block; vertical-align: top; font-weight: bold; padding:4px 4px 4px 7px; width: 70px; border-right:#eee; border:1px solid #d2d2d2; border-right:1px solid #ccc; -moz-border-radius:2px 0 0 2px; -webkit-border-radius:2px 0 0 2px; border-radius:2px 0 0 2px; -khtml-border-radius:2px 0 0 2px; background: -moz-linear-gradient(top, #f1f2f3 0%, #e4e4e4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f2f3), color-stop(100%,#e4e4e4)); background: -webkit-linear-gradient(top, #f1f2f3 0%,#e4e4e4 100%); background: -o-linear-gradient(top, #f1f2f3 0%,#e4e4e4 100%); background: -ms-linear-gradient(top, #f1f2f3 0%,#e4e4e4 100%); background: linear-gradient(top, #f1f2f3 0%,#e4e4e4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f2f3', endColorstr='#e4e4e4',GradientType=0 ); }
.field              { padding:0; display:inline-block; width:100px; }
.field INPUT[type=button] { margin-left:5px; margin-top:5px; }
.field INPUT[type=text], .field INPUT[type=password] { margin-top:0px; width:170px;}
.header A           { display:inline-block; margin-top:10px; margin-left:5px; }
.error              { margin-left:100px;  display:inline-block; vertical-align:top; background-color:#f6e5e5; border:1px solid #eed3d7; padding:6px 8px; color:#b94a48; font-family:'Lucida Grande',Verdana,Arial,Sans-Serif; font-size: 11px; height:auto; -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-khtml-border-radius:4px; min-width:200px; }
.debug-notice       { margin:10px auto; width:550px; }

Return to “ApPHP FormBuilder {developers/users}”