css - MVC 4 data validation message increases width of my form -


i creating quite simple form model. have generated scaffolded "edit" view validation. 1 validation "url" type , causing me problems.

i have in view:

<div class="editor-label">         @html.labelfor(model => model.server)     </div>     <div class="editor-field">         @html.editorfor(model => model.server)         @html.validationmessagefor(model => model.server) </div> 

this css #content section contains rendered view:

#content {     border:solid;     border-width:thin;     position:relative;     margin-left: auto ;     margin-right: auto ;     text-align:center;     margin-top: 50px;     min-width:480px;     max-width:800px;     display:table;     padding: 30px; } 

when page loaded, #content 480px wide , elements inside take space possible (editor-field elements , element submit buttons set 100%, nothing else has width set in css).

when "required" validation message displayed on fields, works ok (width doesnt change).

when enter invalid url, message longer (localized version of default mesage says "pole server neobsahuje plnÄ› kvalifikovanou adresu url protokolu http, https nebo ftp.") , whole #content width changes 657px;

is there way how can keep width before validation message got displayed , wrap validation message in case long more 1 line css settings?

i avoid fixed width settings (on main section , elements including validation message divs) , still keep layout template , css universal can keep using repeatedly without need tailoring particular scenario used.

thanks in advance

i have included screenshot shows how looks like

see screenshot how looks like


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -