I have a Bootstrap 3.0 application and inside a form I have the following code:
<div class="panel-body">
<div class="row">
<h5>Keywords</h5>
<div class="form-control" style="padding-bottom:40px;">
<div class="col-md-10">
<label>Declaratively walpurgisnacht station wellesley unsmudged cystomatous transfuse pecos nonconservative cocainise seaway unblasted gainsaid prewhipped. Adenomatous tzarevna fustily opelika counterblow balaamitical frogmouth damaskeening orthopneic carriable palaeontology postmyxedemic grandsire retouchtracing. Floor saturnalia bagwork semiacid drawl unregal cartouch predestinating curses traymobile quixotism antithesis fourpenny reshine. Gleamingly mongoloid ectrodactylous endostosis chromophil presagefully titillate cruise proairplane curaao montanan untappable flavius unintercepting. Gotha sarape halfpaced winnipegosis aphasia parotidean hydrate hatchetlike nonignitable shockingly changeable animi feces coerce</label>
</div>
<div class="col-md-2">
<button class="btn btn-primary waves-effect waves-light" style="display: inline-block; width:80px" data-step="1">
Edit
</button>
</div>
</div>
</div>
</div>
The result is the following image.
Here is the form-control style:
If you see my <label> has a lot of words and the problem I have is that the round background rectangle is not growing with the Word Wrap.
I marked with red the round background rectangle that Im talking about.
How can I make that background to grow in the same ratio?
Thanks
You are not using the bootstrap classes in their intended way
.form-control has a fixed height. You could either change .form-control to not have a fixed height or add a custom class to change the height of the element. I recommend looking into the intended use of this and other bootstrap classes here:
https://v4-alpha.getbootstrap.com/components/forms/
You have to edit the .form-control class so that it doesn't have a fixed height. Here's a demo, where I added height:auto to the .form-control class.
Related
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/
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>
I have been struggling to get the contents of a boostrap well to center. My badge goes to the right, instead of under the arrows, and my arrows (aka, vote buttons) are not centered in the well either. I have attached a screenshot, and here is the relevant code:
HTML:
<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
Here is the only custom CSS beyond default bootstrap:
/* Voting styling */
.votingButton{
cursor: pointer;
}
Here is the screenshot:
try class="text-center", that should do the trick, if not you can reposition it using style="postion: absolute; margin-left: -5px;", if you're not too picky about the well size, that might be another problem as "well". fix the size to be a little bigger, that would help.
Your column width is too small to render correctly. You need to change col-md-1 col-sm-1 to col-md-2 col-sm-2 or reduce the padding inside the div.