I've searched and can't find a problem similar to mine, where it's partially responsive. I have a footer with 3 buttons and a search box. I'd like for them to be aligned and spaced evenly apart, which I've got figured out. When I reduce the screen size, the buttons are responsive and stack correctly. But the search box is aligning to the left instead of centering with the buttons. Can anyone help? I had to define a width for the search box in order to keep it cosmetically similar to the buttons. I think maybe that's the problem? Please help! Here's my fiddle: http://jsfiddle.net/kEtr9/.
<footer>
<div class="container">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
<!-- replaced this with above: <div class="row"> -->
<div class="col-sm-12 text-center"><!-- centers buttons when screen -->
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i> submit bugs</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Feature Requests</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Contact</button></li>
<li>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" style="width: 160px" class="form-control input-sm search-query" placeholder="Search">
<button type="submit" class="btn btn-xs" tabindex="-1">Go!</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</footer>
This worked for me :-)
<input type="text" style="width: 160px; margin: 0 auto; margin-bottom: 10px;" class="form-control input-sm search-query" placeholder="Search">
Related
I have a modal dialog in my ASP.NET Web application using the following code:
<div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="mdlNewNoteLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mdlNewNoteLabel">Add New Note</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="was-validated" id="frmNote" name="frmNote" method="post">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-floating col-sm-12">
<textarea class="form-control" rows="10" id="NoteBody" name="NoteBody"></textarea>
<label for="NoteBody">Notes</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
In that block there is a <textarea> element that I want to be sized inside the modal according to its row count, which is set at 10. However, it only actually displays three rows in the modal, as shown below:
How do I fix it so that the <textarea> element is as tall as it should be (based on number of rows it is given) rather than the 3 rows it shows now?
With bootstrap, you have to override the height by using:
.specific-textarea { height: 100% !important; }
cf:
https://stackoverflow.com/a/58398265/12172974
Use HTML for textarea sizing.
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
I'm using Bootstrap 4.2.1 and I have an inline form that displays perfectly at viewport widths > 575 px:
However, at viewport widths < 576 px, the form submit button becomes misaligned, dropping slightly:
I've replicated the problem here: https://www.codeply.com/go/hW1xZkJXQ9
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary" type="submit">Add</button>
</form>
</div>
</div>
Any ideas why this happens at smaller screen widths?
Here's what I ended up doing without having to customize the core Bootstrap CSS.
I learned that .form-inline only displays form elements inline at screen widths of at least 576 px. Additionally, I was incorrectly using .form-group along with .form-inline when I should have been using .input-group on the inputs, as was pointed out above. But this still didn't allow me to keep things inline at narrow screen widths of less than 576 px.
Therefore, I abandoned .form-inline altogether and instead used a form grid approach using Bootstrap's built-in grid classes. I used .form-row and treated the inline form elements as normal columns:
Updated Codeply: https://www.codeply.com/go/hwBPwM6qTV
<div class="container">
<form>
<div class="form-row">
<div class="col-8 col-sm-5 col-md-4">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="user#gmail.com">
</div>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Add</button>
</div>
</div> <!-- .form-row -->
</form>
</div>
This keeps everything inline at very narrow screen widths:
Obviously, the columns can be changed to suit the needs of the particular application or preference.
after 576px, form-control remove inline block property, so i will add it for all resolution.
and for btn, i am using mt-n3 mt-sm-0 bootstrap class.
updated codeply: https://www.codeply.com/go/35ENnBhxpA
body {
padding:100px;
}
.form-control {
display: inline-block !important;
width: auto;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary mt-n3 mt-sm-0" type="submit">Add</button>
</form>
</div>
</div>
Hi been searching for few days now but couldnt find anything. I have an accordion that has three accordion group, I have added a button to open the next accordion but cant seem to get it working. Can some one please help. here is what I have so far
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
<div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
<div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
Address Line 1 is required!
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
<div style="width:100%;" *ngIf="i == registrationArray.length - 1" >
<div style="float:right;">
<button type="submit" class="btn green">Continue</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
Removed some code for clarification. Can some one please let me know how I can open the next accordion group on the button click. Thanks in advance
Here is a working example
plunkr
stackblitz link
stackblitz
In your case I see that you're actually just closing the opened panel and that's all. Along with this you need to open a next panel which can be done by setting its isOpen property to true.
A small plunkr with test implementation - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html
I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>
This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});
I'm having trouble trying to resolve this issue. The docs say that I should set the span equal to the parent span, however, it extends to the right outside of the well container when I do that. It looks fine when viewed on mobile (extends the appropriate amount to the right, filling the well), however, it doesn't play well on desktop (I want the fields to extend inside the well).
<div class="container">
<div class="row">
<div class="span4 offset4">
<div id="login-panel">
<div class="well bordered clearfix">
<div class="text-center">
<div class="page-header" style="border-bottom: none; margin: 0;">
<img src="library/img/logo-01.png"/>
</div>
</div>
<form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
<legend>App name</legend>
<div class="control-group ">
<!-- username field -->
<div class="controls">
<label>Email</label>
<input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label>Password</label>
<!-- password field -->
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="control-group ">
<p>
<input class="btn btn-default pull-left" type="submit" value="Sign-up">
<input class="btn btn-primary pull-right" type="submit" value="Login">
</p>
</div>
</form>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
Docs are actually saying:
Use .span1 to .span12 for inputs that match the same sizes of the grid
columns.
But you want to make a full-width <input>, right?
Make an <input> to take full width
input.full-width {
box-sizing: border-box;
width: 100%;
height: 30px;
}
Also remove .pull-left from the <form>. See how it woks on this fiddle.
Edit
Since Bootstrap 2.2.0 use bundled input-block-level class to achieve this effect.
I ran into this problem recently with form and panel body. Upon inspection I noticed that the problem wasn't the inputs, but rather the form itself was extending beyond the panel. I fixed it by putting a max-width: 100% on the form instead of the input.