locked
Is there a way to stop mvc razor from word wrapping field labels??? RRS feed

  • Question

  • User2130491911 posted

    Something MVC makes me wonder why the silly things are so hard to undo.

    So I know the answer is of course you can stop mvc razor from word wrapping labels...

    I know it has something to do with the so call boot straps and I know that most people will try to have you add some sort of intercept that overrides the CSS stuff.

    I don't want to do that as I am not a fan of css. I prefer inline css vs file or adding the overrides to the page.

    So my issues is this...

    I have a Labelfor name "Login ID:"

    The bloody computer screen page when the site is running shows up as 

    Login      [           ]
    ID

    Password [ ]

    Its the silliest thing... the word password is longer by does not word wrap Thankfully!! but the shorter word does...
    It beggers Belief! 

    The Wizard used the @class = "control-label col-lg-2" I tired changing it to small med large and its a no go

    I went in the the browser f12 mode to play around with values to see if I could unwrap the password label.

    My Current work around is that I removed the letters ID from the label.

    But there has to be another way yes?

    Thanks All!

    Wednesday, November 4, 2020 8:12 PM

Answers

  • User1686398519 posted

    Hi AppDev01, 

    According to the code you provided and your description, you can use the .text-nowrap class in bootstrap to prevent text wrapping.

    <table class="text-nowrap">

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 5, 2020 2:01 AM

All replies

  • User475983607 posted

    Typically, the container is too small to hold the words "Login ID".   "Password" seems to work because there is no spaces.  The content, "Password",  pushes the container width outward.

    Try adding a non-breaking space character...

    Login&nbsp;ID

    or apply nowrap CSS to the "Login ID" container.

    white-space: nowrap;

    Unfortunately it is difficult to provide an accurate solution without the markup or CSS.   You should consider learning HTML and CSS fundamentals as well as how to use the browser's dev tool to review the styles applied to a element.  It helps a lot to have a fundamental understanding.  I often apply a temporary board to contains so I can see the bound of the container on the page.  Dev tools has a graphic that shows the box model as well.

    <div style="border: solid pink 1px">       
    </div>

    Wednesday, November 4, 2020 8:37 PM
  • User2130491911 posted

    Hi,,

    So the 

    &nbsp;

    Can just be added in the  PartialClass just like that?

        [MetadataType(typeof(UserLoginMetadata))]
        public partial class UL_USER_LOGIN_TBL { }
    
        public class UserLoginMetadata
        {
    
            [Display(Name = "USER ID")]
            public int USERID { get; set; }

    Also by mark up do you mean the cshtml page source codes?

    I can show that below if that helps:

    @model CMS.Models.UL_USER_LOGIN_TBL
    
    @{
        ViewBag.Title = "CMS LOGIN";
        Layout = "~/Views/Shared/_LoginLayout.cshtml";
    }
    
    <br />
    <br />
    <br />
    
    @using (Html.BeginForm("Login", "Home", FormMethod.Post))
    {
        <fieldset>
            <legend>PLEASE LOGIN</legend>
    
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
    
    
            @if (@ViewBag.LoginMessage != null)
            {
                <div style="border: 1px solid indianred; background-color:indianred; color:white">
    
                <br />
                
                    @ViewBag.LoginMessage
              
    
                <br />
    
                </div>
                 
                <br />
            }
            <table>
                <tr>
                    <td>@Html.LabelFor(a => a.USER_NAME, htmlAttributes: new { @class = "control-label col-lg-2" })</td>
                    <td>@Html.TextBoxFor(a => a.USER_NAME, new { htmlAttributes = new { @class = "form-control", @type = "text" } })</td>
                    <td>@Html.ValidationMessageFor(a => a.USER_NAME, "", new { @class = "text-danger" })</td>
                </tr>
    
                <tr>
                    
                    <td>
                        @Html.LabelFor(a => a.USER_PW, htmlAttributes: new { @class = "control-label col-lg-2" })
                    </td>
                    <td>
                        @Html.PasswordFor(a => a.USER_PW, new { htmlAttributes = new { @class = "form-control", @type = "text" } })
                    </td>
                    <td>
                        @Html.ValidationMessageFor(a => a.USER_PW, "", new { @class = "text-danger" })
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <br />
                        <input type="submit" value="Login" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </fieldset>
    }
    

    Wednesday, November 4, 2020 8:46 PM
  • User2130491911 posted

    Just as a note I added the &nbsp; to the Display option on the partial class file..

    It did remove the space but now it shows up looking like this:

    LOGIN&nbsp;ID	
    

    Thats not what I was looking or So if I use an underscore in LOGIN_ID that will remove the space and it will all be on one line I am guessing.

    I can live with that. if that is what I need to do. 

    Thanks for the insight! 

    Wednesday, November 4, 2020 8:53 PM
  • User-474980206 posted

    no, you can not pass markup via the [Display] attribute. You must use manual markup. your column is just too narrow. the longer labels are actually extending outside the grid container. if you narrow the browser width, you can probably get "Password" to cover the textbox.

    you should use responsive design and use the bootstrap grid rather than table. make the column wider on a narrow device. say add "col-md-4 col-sm-12", of course you need to adjust the other columns.

     

    Wednesday, November 4, 2020 9:01 PM
  • User303363814 posted

    A class of

    col-lg-2

    has three parts.  The first part ('col')  means that whatever the class applies to is in a column in a container.  The container width is divided into 12 equal columns by the Bootstrap grid system.

    The middle part tells you what size of container this applies to.  'lg' means that this class is only applied when the container width is greater than 960px.  'sm' would be >= 560px.  The documentation will tell you what widths the other values apply to.  If you don't specify the second piece then this class applies to any width 'col-2' basically means 'when >= 0px'.  You can specify multiple classes and they take effect at each size step.

    Because there are 12 columns in the container, you can calculate the width of a single column.  When the container is, for example, 840px wide then each column is 840/12 = 70px wide.  If you are using 'lg' for the middle piece then each column will be at least 960/12 = 80px wide. ('At least' because the setting applies from 960px and up, so the container could be 1200px wide and this setting would apply and each column would be 100px wide)

    You have different sized containers because the user can be viewing the page in many different ways - on a phone, table, computer, wide browser window, narrow browser window, on a tv, etc.

    The third piece '2' specifies how many of the columns to use.

    So, col-lg-2, will take effect when the container width is 960px or greater and fill two columns.  960 / 12 = 80px for each column.  This setting means the item will fit in a space whose width is, at least 80 * 2 =160px.

    So, how do you get more room for your text?  You should experiment with the third piece, the '2'.  Your text seems to almost fit, so my guess is that a '3' would do the job.

    BUT, this setting only takes effect for containers wider than 960px.  A good idea is to specify a class without the middle piece to cater for the smallest container.  In other words, start by using "col-2" (instead of "col-lg-2".  Make your screen the narrowest that you expect you users to use (some will have quite old phones, if this will be available to mobile users).  They F12 developer tools are useful for simulating various devices. If the text wraps (and it will) then try "col-3".  Still not wide enough? "col-4", and so on.  Once it looks good (and you should style the whole page at the same time) then try a larger device.  There will come a size when too much space is allocated to this element, because col-3, for example, means 3/12 of the width (one quarter).  As the screen gets wider, so will this element.  (That's a good thing, because users with wider screens shouldn't be forced to see everything cramped together just in case someone else has an iPhone 4).

    When the space available to the element is too wide then add an extra class.  Say, you decide that when the container is about 700px wide the space is too much.  700px is almost the 'md' breakpoint (720px).  Add a class which take effect at that point.  Maybe "col-4" worked at small screen sizes, in which case you should add an extra class to get "col-4 col-md-3".  This means that from zero up to 720px container width the element is allocated four columns.  From 720px and up the element is allocated three columns.

    Wednesday, November 4, 2020 9:23 PM
  • User-474980206 posted

    He is use col-lg-2 on a <td>. Which is somewhat support in bootstrap 3. But you are limited in the response design with tables. 

    Thursday, November 5, 2020 12:30 AM
  • User1686398519 posted

    Hi AppDev01, 

    According to the code you provided and your description, you can use the .text-nowrap class in bootstrap to prevent text wrapping.

    <table class="text-nowrap">

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 5, 2020 2:01 AM
  • User2130491911 posted

    Yeah Bootstrap is a bit overly complex I tried changing all the types and it did not work for me.

    My guess is that because there is no div setup for the form its not working sadly. For now I will just use the underscore to remove the space as that seems to allow everything to fit on one line. Thanks for the amazing details. I have a slightly better understanding now. But man talk about overly complex structures. 

    Friday, November 6, 2020 5:01 PM
  • User2130491911 posted

    Oh my gosh!! This worked!!! So these are built in thing?

    Wow thank you so much... I can see from the list of options... there are a lot of options I can try as well!!

    Thanks so very much!!!

    Friday, November 6, 2020 5:04 PM