<div class="col-md-3 bg-primary p-1 align-content-center text-center mb-5">
<div class="container bg-light sticky-top jumbotron" role="group">
#foreach (var item in Model.Data)
{
<div class="row mb-1">
<a class="btn btn-secondary flex-fill" asp-action="Index" asp-controller="Search" asp-route-query="#item">#item</a>
</div>
}
</div>
</div>
I'm dynamically adding buttons into the column. But text inside button might be wider than column, and then it can go further and beyond the screen.
How to ensure that text inside button will break before getting out of the column?
I have tried class with word-wrap: break-word inside <a> which works for text inside paragraph but not here, and I'm kind of lost.
It lools like your a element overflows its container.
So try to create a class and apply it to your button:
.foo {
word-wrap: break-word;
width: 100%;
white-space: normal;
}
and:
<div class="row mb-1">
<a class="btn btn-secondary flex-fill foo"
asp-action="Index" asp-controller="Search" asp-route-query="#item">#item</a>
</div>
A fiddle example can be seen here
Maybe try use:
a {display: inline-block; max-width: 100px; vertical-align: middle;}
word-wrap: break-word work only with display (inline & block)
Related
I have the following html code with own css and bootstrap classes:
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
And CSS:
.table-string {
width: 100%;
text-align: end;
}
I need to recieve column like this:
But actually get this:
How to align values without percentages in a column so that they are strictly under each other: hundreds under hundreds, tens under tens, ones under ones? And also value and percentage must be aligned at the end of the field. Thanks for any help
As a temporary solution, you can use something like this. Just set the width: 50%; of your <p> and <span> tags.
.table-string {
width: 50%;
text-align: end;
}
span.ml-2 {
width: 50%;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
You need to divide your row into 2 equal halves and align text depending
<div class="row" style="width:10rem">
<p class="col-6 p-1 text-end">91.86</p>
<span class="col-6 p-1 text-start">(+61%)</span>
</div>
and this is an example
Let me know if you need anything else
Remove d-flex from all the Div's and put d-inline onto all <p>'s and <span>'s instead. With this you most likely do not need the CSS for .table-string so remove that as well.
Eg
<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>
Apparently you are using Bootstrap, and if I understood your question, you just need to add two classes to the flex item, flex-column align-items-end, in order to set the direction of flex items and change the alignment on the cross axis:
<div class="d-flex flex-column align-items-end">
[…]
</div>
I have a sidebar where I want to give the heading and the description a max of two lines. However, the height of the span should always be two rows long in order to have the same vertical alignment. Also, I don't want the the last word to break, it should just replace the it with .... For example if the last word wouldn't fit in the given space, it shouldn't just break the word into the next row, instead it should look like this this is my descirpti....
The word should just be cutted and be appended by ....
Also, is it possible to add a class to every div where the text got cutted? I want to have a special style for those cases!
I want to solve this with the CSS property text-overflow
.max-width-200 {
max-width: 900px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
.heading-wrapper ,.description-wrapper {
height: 50px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, its not very long</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
<hr>
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, Its longer then it should be.. someone fucked it up. Please fix me to be only two rows long!</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
</div>
You can use:
span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Usually text-overflow: ellipsis; needs a white-space attribute to be set, in order to work. See: https://stackoverflow.com/a/7680712/8177490
You should also check for browser compatibility before using it.
If you don't want the heading to be affected change its tag from span to p or some h tag.
I've created a div that uses flex to display 5 icons inside of a container. Each of these containers has a div with a text element inside. This text div has an opacity of 0 by default and is changed to 1 when it's parent is hovered.
The problem happens when you move your mouse into the text div. For some reason, it defaults to showing the text div of the very last parent element. I've recreated the issue here: JSFiddle
Here is the basic structure of the HTML. I've removed the last 3 content divs for readability.
<div class="container-fluid icon-repeater-fluid-container pt-5 pb-5">
<div class="container icon-repeater-container pb-lg-5">
<div class="text-center d-flex flex-column flex-lg-row justify-content-center justify-content-lg-around">
<div class="p-3 learn-more-main">
<i class="far fa-address-card learn-more-icon"></i>
<p class="learn-more-labels">Learn More</p>
<div class="learn-more-content-container">
<div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
<i class="fas fa-caret-up learn-more-caret caret-1"></i>
<p class="mb-0 text-center">
I am a sentence that belongs under the Learn More container. I should really only be a few sentences.
</p>
</div>
</div>
</div>
<div class="p-3 learn-more-main">
<i class="fab fa-angular learn-more-icon"></i>
<p class="learn-more-labels">Angular Skills</p>
<div class="learn-more-content-container">
<div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
<i class="fas fa-caret-up learn-more-caret caret-2"></i>
<p class="mb-0 text-center">
I am a sentence that belongs under the Angular Skills. I should really only be a few sentences.
</p>
</div>
</div>
</div>
...
</div>
</div>
</div>
and here's the line of css that I'm using to show the appropriate div
.learn-more-main:hover .learn-more-content-container{
opacity:1;
}
If you hover over any of the .learn-more-main containers, it shows the appropriate text. But if you try to move your mouse into one of these text containers, it removes the appropriate container and puts the very last container there instead.
Set your:
.learn-more-content-container{
position: absolute;
bottom:0;
left:0;
right:0;
opacity:0;
transition: opacity .25s;
pointer-events: none;
And on hover your back to pointer-events: auto; :
.flex-column .learn-more-main:hover > .learn-more-content-container{
opacity:1;
pointer-events: auto;
}
Your problem was the opacity, elements are still there and moving mouse it was losing selection, if you would go with mouse up from bottom it always shows last one because it was last learn-more-main in your HTML markup.
I am trying to create a layout that would be responsive using Bootstrap 4. The problem I am having is when two divs wrap vertically for a smaller device the top div seems to push the lower div down exceeding the parent container (please see the images below). I want the lower div to fit with in the container, how can I achieve this using Bootstrap 4 or minimal css?
I added a yellow border on the bottom of the second div so we can see the push.
Large device view
Small device view
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid p-0 h-100">
<div class="row h-100">
<div class="col-md-8 bg-primary h-md-100 ">
<div class="d-md-none text-center bg-primary">
<h5>Left Section</h5>
</div>
<div class="d-none d-md-block m-3">
<h1>Left Section</h1>
</div>
</div>
<div class="col-md-4 h-100 text-center bg-danger bottom-border">
<h4>Right Section</h4>
</div>
</div>
</div>
</body>
After you explained the significance of the border height, now I see what you mean, as mentioned previously, your h-100 classes are the issue.
That class tells the element to use 100% of its parents height, since you put that class on the main container and on the row elements, those two are using the full screen's height since the container's parent is the browser window and the row parent is the container.
When you use that same class on the children div, in this case, the red div, it also tries to use the full height of its parent (the row), but it does not take into consideration the other item inside (the blue div), if you remove the h-100 class from the red div, then each of them will use half the available space.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container-fluid h-100">
<div class="row h-100 flex-column flex-md-row">
<div class="col-md-8 bg-primary">
<div class="d-md-none text-center bg-primary">
<h5>Left Section</h5>
</div>
<div class="d-none d-md-block m-3">
<h1>Left Section</h1>
</div>
</div>
<div class="col-md-4 flex-grow-1 text-center bg-danger bottom-border">
<h4>Right Section</h4>
</div>
</div>
</div>
</body>
If I understand correctly, you'd wish to keep the left and right div keep doesn't go on top of eachother?
col-md means everything that the window size is above 768px, keep that number of columns. if you use col-sm, it would be everything above 576px. If you just say col-number, you'll keep it responsive reguardeless of the container width.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container-fluid p-0 ">
<div class="d-flex flex-row flex-wrap bd-highlight text-center ">
<div class="col-md-8 ">
<div class=" h-100 bg-primary">left</div>
</div>
<div class="flex-column col-md-4">
<div class=" bg-danger ">Right</div>
<div class=" bottom-border ">Bottom</div>
</div>
</div>
</div>
</body>
Also, since you're using Bootstrap 4, I'd also recommand checking Flex, which you basically put d-flex class on the parent and all the child will become responsive. You can make them even more precices with columns like you've did, but Flexbox is pretty powerful and really braindead to apply when you know how.
By using Twitter Bootstrap 3.2.0 and a very nice snippet, I've created a menu-box with multiple choices.
For each menu item there is a label and a short description, as shown in figure below:
You could find an example with the code on JSfiddle.
Now, I'd like to:
Align menu-item content on middle (regarding the vertical-alignment);
Align the submit button on bottom-right.
Someone can suggest me how to do that?
1. Align menu-item content on middle (regarding the vertical-alignment):
I've recently used this excellent tutorial by #beaver82minimit that allows to create equal height columns bootstrap style: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
You can use it like this:
<div class="container container-xs-height">
<div class="row row-xs-height">
<div class="col-xs-6 col-xs-height"></div>
<div class="col-xs-3 col-xs-height col-top"></div>
<div class="col-xs-2 col-xs-height col-middle"></div>
<div class="col-xs-1 col-xs-height col-bottom"></div>
</div>
</div>
With the class col-middle you can center your content vertically.
2. Align the submit button on bottom-right
a) Add class bottom-right to the button and remove the wrapping <p>
<button type="button" class="btn btn-primary btn bottom-right" style="margin: 20px 0 0 0;"><span class="glyphicon glyphicon-log-in"></span> Submit</button>
b) Add this to your stylesheet:
.bottom-right {
position: absolute;
right: 0;
bottom: 0;
}
To prevent tab content to overlap with button, add padding-bottom to tab-content div:
div.bhoechie-tab-content{
background-color: #ffffff;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 54px;
}
Here is a demo: http://jsfiddle.net/LaBZP/3/
List-group-item vertical aligning middle:
.text-center {
display: table;
width: 100%;
}
.text-center > div {
display: table-cell;
vertical-align: middle;
}
Add divs under list-group-item to markup:
<a href="#" class="list-group-item idp-group-item text-center">
<div>
<strong>Label B</strong><br/>Label B Desc
</div>
</a>
Demo: http://jsfiddle.net/LaBZP/4/