I have a webforms project in asp.net. I'm using bootstrap 3. I have an input control in a form group (in a panel). I cannot override the max width of my input control to make it fit into the col width I have set.
I've tried to amend/remove the input {max-width} attribute in Site.css but this doesn't make any difference. Any ideas?
<div class="row">
<div class="form-group" >
<label for="txtName" class="col-md-3 control-label">*Material Name:</label>
<div class="col-md-9">
<input runat="server" id="txtName" type="text" class="form-control" title="" required />
</div>
</div>
</div>
Site.css extract that I changed from max-width: 287px :
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 100%;
}
Use the developer to tools on any of the browser to check the element of input because you're using runat="server" for the input the id will render differently in the browser hence your styling is not applying. I've checked on my local dev with a demo page and the input id is being rendered as MainContent_txtName instead of txtName. Of course yours will/might be different. Once you have the correct id all you need to do is
#MainContent_txtName
{
max-width: 100px !important;
}
I hope that answers your question
Related
I have a search box with input element and submit button. I am working in bootstrap. At xs breakpoint submit button goes into another line. I want to make the whole forum never collapse but changes its size as it happens by default
<form class="form-inline quick-search-form" role="form" action="search.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Keyword(s)">
<button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button>
</div>
<div class="pad-top-20">Examples Background, Banner, Brochure</div>
By default, bootstrap inline form will always collapse on xs (from the documentation http://getbootstrap.com/css/#forms-inline)
Add .form-inline to your form (which doesn't have to be a ) for
left-aligned and inline-block controls. This only applies to forms
within viewports that are at least 768px wide.
You need to override them so it will never collapse
.form-group input{
width: 80%;
display: inline-block;
}
Working plunk: https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview
I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.
Anyone have a working suggestion that would allow for fluid re-sizing?
Here is the code that I have. Right now the width goes to a little past the placeholder text.
<div class="row">
<div class="col-lg-7">
<h2>#Model.EmployeeName</h2>
<h3>Employee #: #Model.EmployeeNumber</h3>
<h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
<textarea rows="2" placeholder="Exception Log comments."></textarea>
</div>
<div class="col-lg-5 text-right">
<div ng-controller='TimeCtrl'>
<h2>{{ clock | date:'fullDate'}}</h2>
<h1>{{ clock | date:'HH:mm:ss'}}</h1>
<input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
</div>
</div>
</div>
I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.
<textarea class="form-control"></textarea>
class="form-control" must work. If it is not working, it means that somewhere in css file, max-width property is set for text-area which restricts the width. In this case check site.css file and remove max-width property.
Just add a 'form-control' class to textarea. If you are working on a small screen, col-lg-7 and col-lg-5 is cover all window.
And your columns text alings are different. You may see the col-sm-12 in your screen.
<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
If you just add some custom CSS you can force it to use the entire container width
min-width: 100%
max-width: 100%
However, using the bootstrap class "form-control" also accomplishes this
Simply add form-control class to your textarea if you want 100% width on it, no need to add col-lg-12 because form-control class gives the 100% width of the parent to the element.
<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.
Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/
HTML:
<div class="wrapper">
<button type="button" class="new_button">Create New</button>
<form name="input" action="" method="post">
Search:
<input type="text" class="search_input"></input>
<input type="submit" value="Submit"></input>
</form>
</div>
CSS:
.new_button
{
float: left;
min-width: 120px;
}
.search_input
{
width: /* What could go here? */;
}
A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/
Is there any way to get the input text box to resize dynamically and still fit where I want it to?
According to this question : try changing :
<input type="text" class="search_input"></input>
to
<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>
JSFiddle
**Updated*************************
New JSfiddle
I'm trying to align my Checkbox with label to center in my little webpage I'm developing but I cannot figure out how, and yes I've googled!
You can view source on my webpage, http://www.sithhappens.net (Load the phone on your mobile though thats where all the CSS is done is for mobile view (Desktop view will come later).
And see the css at http://www.sithhappens.net/iphone.css
Not HTML5 but it works:
http://jsfiddle.net/gYCQz/
CSS:
input
{
display: inline;
}
body
{
text-align: center;
}
HTML4+:
<input type="checkbox" value="Test" /> Test
if u want check box in center use this
<div>
<input type="checkbox" value="Test" />
<div>
then u can use text-align(right,left,center) whatever u want.
also u can use
<div align="center">
</div>
and remove margin-bottom from all tag give width and height.
How do I make a Bootstrap input field be exactly 100% as wide as its parent?
As steve-obrien wrote in Bootstrap Issue #1058:
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.
Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.
Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}
If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
New code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>
I found a solution that worked in my case:
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-width set 100% and important and the result is this one:
If you don't apply it, you will always get this:
In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box
The width and height properties include the content, the padding and border, but not the margin."
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.
Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.
What about?
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
input,select,textarea {
max-width: 280px;}
just add:
width: 100% !important;