2 Replies - 653 Views - Last Post: 12 November 2016 - 12:03 PM

#1 jphoc13  Icon User is offline

  • D.I.C Addict

Reputation: 0
  • View blog
  • Posts: 579
  • Joined: 08-July 13

Changing form width in Create views, bootstrap

Posted 12 November 2016 - 11:38 AM

I am trying to turn the normal Create text boxes in the form controls to either adjust to the size of the text typed in or to just make it large enough to fit a blog post.

I thought I could do that by creating new classes in the bootstrap.cs file like this:

.blog-text{
  display: block;
  width: 1000px;
  height: 500px;
  padding: 6px 12px;
  font-size: 14px;
}

.blog-div{
    
}



Here is my view for the Blog Create page:

<div class="blog-div">
            @Html.LabelFor(model => model.BlogText, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BlogText, new { htmlAttributes = new { @class = "blog-text" } })
                @Html.ValidationMessageFor(model => model.BlogText, "", new { @class = "text-danger" })
            </div>
        </div>



There is also a form div surrounding the above div where I tried changing the max width, and my text box still doesn't change, all the the height will change to what I need. It is just the width that doesn't change at all.

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
  }
}


I am not sure what attribute I am missing that could alter the width of the Blog-text box I am trying to alter.

Is This A Good Question/Topic? 0
  • +

Replies To: Changing form width in Create views, bootstrap

#2 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6334
  • View blog
  • Posts: 25,541
  • Joined: 12-December 12

Re: Changing form width in Create views, bootstrap

Posted 12 November 2016 - 12:02 PM

Inspect the elements in the resultant page using your browser's developer tools. Is your css being applied? Is it being overruled? Is a parent element constraining the width?

"I thought I could do that by creating new classes in the bootstrap.cs file"

I wouldn't add custom css in the bootstrap file, keep it separate. Firstly, just to keep your custom rules separate, but also, at some future point there may be a need to update the version - or someone else may just step in and update it for you! - and your important adjustments will disappear.

Also, if you are using Bootstrap, then shouldn't you be applying Bootstrap classes like form-group, form-control, etc., as well? Otherwise, you aren't tweaking Bootstrap, you're side-stepping it.

Bootstrap Forms:

Quote

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Was This Post Helpful? 1
  • +
  • -

#3 jphoc13  Icon User is offline

  • D.I.C Addict

Reputation: 0
  • View blog
  • Posts: 579
  • Joined: 08-July 13

Re: Changing form width in Create views, bootstrap

Posted 12 November 2016 - 12:03 PM

Ok good to know. I appreciate your help and will create additional classes to correct this.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1