I would like to adjust the height of the form input box and make the text almost touch the top and the bottom borders of the box. I tried adding some css, but had no luck. I'm looking for a bootstrap css solution.
.form-group {
height: 10px;
width: 30%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<label for="input">First Name</label>
<input class="form-control" type="text" name="input" placeholder="Enter text">
</div>
In other words (or pictures), I want to change this
to this:
Using Bootstrap only, your best bet would be:
Bootstrap v3
https://getbootstrap.com/docs/3.4/css/#forms-control-sizes
Bootstrap v4
https://getbootstrap.com/docs/4.5/components/forms/#sizing
From there you can adjust the padding manually to reduce the gap between the top/bottom of the letters with the border of the input box.
Bootstrap v4: https://getbootstrap.com/docs/4.5/utilities/spacing/
Bootstrap v3: You'll have to use CSS padding on the <input> element to adjust.
I'd use the recommended bootstrap solution and override $input-height variable in my custom.scss,
like so:
$input-height: 1rem;
(overriding bootstrap variables: https://getbootstrap.com/docs/4.0/getting-started/theming/)
Related
I have the following inside my asp.net core MVC view:-
<td>
$<input asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
where I am trying to display a $ sign beside an <input> on the same line, but currently, my above code will show the $ on a separate line as follow:-
Any advice on how I can show them on the same line?
My guess is form-control has the style display:block; and width:100%
Remove the above styles or override it using custom css below
.form-control.tablecellcustom {
display: inline;
width: auto;
}
I think your code internally uses Bootsrap. This is a guess, might be wrong. If its internally using Bootstrap you can try using input group also.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>
I suspect your input is display block so you need to have a wrapper for your input and use flex box to achive this.
.form-control-wrapper {
display: flex;
align-items: center;
}
.form-control {
margin-left: 5px;
}
<div class='form-control-wrapper'>
$ <input class='form-control' />
</div>
The code you posted works as desired. Seems like you didn't post the CSS which is applied.
Anyway, make sure the input element has display: inline or inline-block to appear in one line with the "$" symbol before it.
You can put value in the input value.
You can set a variable in value, also concatenate the string with $ before putting it
You can also set a label for that input then style it in CSS to be in the same line
<td>
<input value={} asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
I am using Bootstrap 4. My HTML code is like below.
<div class="font-weight-bold col-12">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
Before decrease the browser size my output is like below
After decrease the browser size my output is like below
How can I keep both elements in the same line after I decrease the browser size?
Try like that:
<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
You can read more about bootstrap grid system here.
You can do a few things here:
1) get rid of the "form-control", add a class of your own and set its width using CSS
HTML
<input type="text" class="my-input" />
CSS
.my-input {
width: 100px; // or the width you desire
}
2) Overwrite the CSS of the element inside the media query.
Somewhere in bootstrap CSS you have a selector (of "form-control") inside a media query which gives the input a smaller width. You can create your own media query and selector and overwrite it.
3) Sort of a combination of both. You can just add a class to the input
<input type="text" class="form-control my-input" />
and then add CSS according to the screen width.
It might not be that elegant - but you can also use !important on the width and then it won't be overwritten when the screen size changes.
Like:
.my-input {
width: 100px !important; //again - not elegant, but will do the work
}
Write the CSS for input as:
input {
width: calc(100% - 55px)
}
HTML
<div class="font-weight-bold">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
55px is the width allotted for the label. The input will adjust itself as per the screen and the label width without using any bootstrap also.
I have an issue regarding textarea tag used along with materialize.css library
Current Behavior
Text area expands as we place more text
Desired Behavior
I want to have a fixed height text area and when i insert a big text height remains as it is and textarea becomes scrollable
$('#textarea1').val('');
$('#textarea1').bind('input propertychange', function() {
M.textareaAutoResize($('#textarea1'));
});
<textarea id="textarea2" rows="10" cols="50" style="height: 100px;"></textarea>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s12">
<textarea id="textarea1" style="height: 100px;" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
The issue presented on the above snipper, what i need is a textarea like the plain one which adds a scroll on big texts.
I got through the documentation and the only mention on textarea's is this
advanced note: When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.
There is any way to make textarea scrollable with custom css or even better through the library alone?
Set the height of textarea and override it with !important. This will ensure that the textarea won't resize. For scrolling part, add rows and oninput attribute. oninput is triggered every time the value of an element changes even while it still is in focus.
Read more: https://html.com/attributes/textarea-onchange/#ixzz5RoZe3nfp
In materialize.css file, in class textarea.materialize-textarea, you'll find that overflow-y is set to hidden. So with the help of rows, lineCount and overflow-y, scrollable materialize textarea with fixed height can be achieved.
HTML -
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea" rows="5" oninput="changedValue()"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
CSS -
textarea {
height: 8rem !important;
}
JS -
function changedValue() {
let text = document.getElementById("textarea1");
let textValue = text.value;
let row = text.getAttribute('rows');
let lines = textValue.split(/\r|\r\n|\n/);
let count = lines.length;
if (count >= row) {
text.style.overflowY = "scroll";
}
else if (count < row) {
text.style.overflowY = "hidden";
}
}
Credits - Ir Calif - For line count
I have created a sample jsFiddle here, with the html copied straight from my web page. I have included the css for bootstrap 4 which i have compiled using sass, along with the rest of my css.
Now from what i can see, this should all line up fine, and on all sizes it does, until you get to a small display. Then for some reason the input boxes and buttons seem to go all the way to the edge, but the rest of the content (labels, headers, p text, tabs etc) seem to stay within the bounds of the tab-content box.
Here is the link to the jsFiddle example
https://jsfiddle.net/Gillardo/y3Lr9sbf/1/
Why is this? Have i laid something out incorrectly, or is it just a bug with bootstrap 4 currently? I am asking here because if i go to the bs4 examples, it lays out correctly, which you can find here, and i cannot tell what i have done differently http://v4-alpha.getbootstrap.com/components/forms/#using-the-grid
An example of how my form is created, using form-group is like so
<div class="row form-group">
<label class="col-sm-3 form-control-label">Label</label>
<div class="col-sm-9 col-md-7">
<input class="form-control form-control-lg ng-pristine ng-untouched ng-valid" disabled="disabled">
</div>
</div>
Class .tab-content is set with 0 padding, if you want some change the following:
.nav-pills+.tab-content {
border: 0;
padding-bottom: 3rem;
padding-left: 0; // <-- change
padding-right: 0; // <-- change
}
Alternative answer, modify .row class to remove negative margins:
.row{
margin-left: 0 !important;
margin-right: 0 !important;
}
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}