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/
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.
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.
https://jsfiddle.net/wc3f1h0m/
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="btn-block">
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary" value="App Button One"
/>
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary"
value="App Button Two"
/>
</div>
</div>
</div>
I have two button underneath a form in a btn-block. While the form is wide enough, I would like the buttons side by side (stacked horizontally), and roughly centered under the form.
When the screen width shrinks, eventually the buttons will stack vertically (due to btn-block), but at this point I would like to align them left, rather than their initial center position.
Currently I am just offsetting them using another column, so I would like that left column to dissapear when they stack vertically, or some other way of achieving this. I was thinking of having another with a certain width but zero height, but when I tried that the div always stays to the left of the first button, it does not get stacked vertically alongside the others.
How can I center the buttons when they are stacked horizonally, but left align them when they switch vertically?
More generally, how can I apply rules based on this "switch" - do the elements get a different class when they switch to stacking vertically I can apply more rules on?
TIA
I don't know that you can make them automatically align left once they no longer fit side by side but you can if you define a particular media query break point for them to do that at. So because you've got a max-width on the buttons of 170px each, i've applied the media query to keep them left aligned up until 320px. Seems to hit the mark pretty well.
https://jsfiddle.net/wc3f1h0m/15/
key changes are:
1) get rid of the col-xs-1 div as the buttons are centered now anyway so its not doing anything.
2) adding a new class "btn-alignment" to the "btn-block" so that we can apply our own custom css to it.
.btn-block.btn-alignment {
text-align:left;
}
#media(min-width:320px) {
.btn-block.btn-alignment {
text-align:center;
}
}
Also changed your h5's to labels which is what you should use to define inputs on forms.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Or this inverse:
<div class="row">
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Is this the sort of thing you are looking for? Was kind of confused how the whole form was wrapped in a col-md-4 as to get the behaviour you were looking for. Hopefully one of these
'<style type="text/css">
/*Use the following code*/
#media(max-width:320px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
/*-----or---------*/
#media(max-width:480px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
</style>'
I recognize that this question has been asked a hundred times. However, the answers that I see do not work in my situation. This makes me believe there is something additional in my content.
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
</div>
I want the remove [x] in the second column to be vertically centered in relation to the first column. Right now, the remove [x] is vertically centered across the top. I thought I could vertically center the content by doing the following:
<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
Unfortunately, that did not work. I'm not sure what I'm doing wrong.
First, I'd recommend you to add an additional class to the columns you want to work with. In your bare-bones example, it won't make a difference, but once you start adding more elements, you'll find out the advantages of managing elements by their re-usable class.
So, first step, a tiny change in your HTML. Not really needed since you could easily target (for example) .col-xs-6 , but this is a general approach (as we're at it, I'd add a class to that row and remove that inline style)
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<span class="pull-right remove">
remove
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
</div>
Now that we can SAFELY target Bootsrap element without affecting the flow of the same re-usable classes in further uses, we simply give a vertical-align to them, like this:
.midvert {
display:inline-block;
vertical-align:middle
}
See how the vertical align is added to the CONTAINING BLOCK ELEMENT, not the element you want to align itself. But of course, that won't do anything at all, because our .remove element needs some sort of defined height, so we add the following:
.remove {
line-height: 4;
}
While the reasons for single numbers is open to discussion (you could use px, rem, em, %, etc), and I have seen that most people here use the px approach, I prefer to use single numbers. You can see the rationale here Prefer unitless numbers for line-height values , but again, use as you please. You'll notice that a number between 4 and 4.5 is the perfect fit, just resize window and see it by yourself.
I've forked a Bootply to demonstrate the issue
You could achieve this by adding a line-height to your "remove" link.
For example if you add this class to your link:
.remove {
line-height: 40px;
vertical-align: middle;
}
It will be aligned.
Bootply demo
I have created Fiddle for you, Hopefully this work for you.
Please observe css tab where i have added display:table-cell; for other col-sm-6 css class as well.