I am trying to float a bootstrap badge to right of a label. However I run into problems with spacing and with the element that the span is with in resizing.
It seems that my element size changes enough when the badge appears that it forces the label to move within the span.
<div class="row-fluid" style="padding-top: 10px;">
<div class="span4 text-center">
<span class="tab">
<a class="tab" href="javascript:void(0)" ng-click="tabSelected('one')">Stuff 1</a>
</span>
<span class="badge badge-success" ng-show="currentTab == 'one'">0</span>
</div>
<div class="span4 text-center">
<span class="tab">
<a class="tab" href="javascript:void(0)" ng-click="tabSelected('two')">Stuff 2</a>
</span>
<span class="badge badge-success" ng-show="currentTab == 'two'">0</span>
</div>
</div>
</div>
Is there a way to place the badge just to the right of the label such that when the badge appears/disappears the label does not move.
I am using bootstrap 2.
Plunk here to demonstrate:
http://plnkr.co/edit/iurlXU?p=preview
Click each label to switch the badge.
This is happening because you are using the text-center class. The text-center class always places the the text in the center on the div based on the text's length. When you de/activate the badge the length changes and therefore the text is moved a bit to the right or the left. If you remove the text-center alignment you get the expected result.
If it is required to have the content of the div placed somewhere specifically in the page you can utilise a grid style with a <div class="row"> / offset and col-x size in order to bring the div in the required position (1).
Check the grid style in this page
Related
In Bootstrap 4 mark-up, I have a left-hand column which contains a .list-group, which, dynamically generated, could contain dozens of .list-group-items.
On its right, I have a column containing a .row which itself contains numerous cards, all inside columns. There may be hundreds of these...
<h3 class="text-secondary pb-3">Header</h3>
<div class="row">
<div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 7000px; overflow-y: scroll;">
<div class="list-group list-unstyled">
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
</div>
</div>
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9>
<div class="row">
Lots of cards throughout this row, inside .col-lg-4 cards.
</div>
</div>
</div>
Depending on the amount of content on the right, the left-hand .list-group may come up far longer than the volume on the right. In such a case, I want the displayed height of the .list-group to be limited and for the .list-group to be independently scrollable.
I have managed to implement that by applying the CSS rule overflow-y: scroll; to the column containing it, which feels great...
The thing is, I can only manage it by manually setting the height of the column at, eg. max-height:7000px;.
The trouble with this is, depending on the volume of content on the right, it risks shortening the viewable .list-group. In this example, the bottom of the left-hand .list-group column should stretch to the bottom of the adjacent right-hand content, whilst also retaining independent scrolling...
How can I ensure that, where the left-hand column / the .list-groupis physically longer than the content on its right, has its viewable height cut short to match the height of the stuff on the right?
This should retain overflow-y: scroll; so that, if the list is still longer than what is on the right, it can scroll vertically.
Solution would ideally use Bootstrap 4 styles and not resort to writing custom CSS rules.
Since the overflow scroll needs a fixed height, you can't use auto. You need to change the height of scroll area with jquery using the height of cards area with base.
If the content is generate dinamically, you need set a timeout before equal the heights.
Here is a example using jquery. In the example, I get the height of cards area and set it to height of list group area.
Html
<h3 class="text-secondary pb-3">Header</h3>
<div class="row">
// Add a class to the list group area and set height instead max-height
<div class="list-group-area col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="height: 300px; overflow-y: scroll;">
<div class="list-group list-unstyled">
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
<a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
<span class="badge badge-primary badge-pill">26</span>
</a>
</div>
</div>
// Add a class to the card area
<div class="cards-area col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
<div class="row">
Lots of cards throughout this row, inside .col-lg-4 cards.
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
// Delay
setTimeout(function() {
$('.list-group-area').height($('.cards-area').height());
}, 1000);
});
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I have a fixed top menu with an image on the left, an input to it's right and another input on the far right. I want the center input to stretch to fill all remaining space between the image and the other input.
Normally in semantic-ui I'd consider a fluid input, but that doesn't seem to work at all inside a semantic-ui menu. When 'fluid' is applied the input becomes smaller.
How can I get the center input to stretch to full-width between the other two? Is there a way to do this with just semantic-ui?
<div class="ui fixed borderless menu">
<div class="header">
<a href="/" class="">
<img src="logo.png">
</a>
</div>
<div class="item">
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="right item">
<div class="ui left icon input">
<i class="map outline icon"></i>
<input type="text" placeholder="location">
</div>
</div>
</div>
You can set flex-grow to 1 for the item's css style.
<div class="category search item" style="flex-grow:1;">
<div class="ui icon input">
<input class="prompt" placeholder="Search..." type="text">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
Tested and Work with Semantic UI 2.2.13
Set the display property of the elements to display: inline-block.
Set the width properties for the elements to relative values, i.e. use percents instead of pixels.
Set the values of the width properties for the elements so that they add up to 100%.
Remove any extra margins and/or padding from the page.
* {
margin: 0;
padding: 0;
}
I want to make the whole view linkable.
This is my rewrite rule:
<div class="news_column_wrapper z-depth-1 card">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</div>
This is my view field screenshoot, I want to make the whole box clickable:
I have tried with
<div class="news_column_wrapper z-depth-1 card">
<a href="[path]">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</a>
</div>
but nothing happens. How can I achieve that?
I think it's more an HTML issue than a Drupal one.
The <a> tag is an inline tag, and you have placed <div> tags inside of it. The natural display of the <a> tag will make that, only the text will be clickable.
What you can do is use CSS to make the <a> a block element, therefore, making the clickable zone extend to the whole block.
First add a class to your link:
<a class='block_link'>
<h2>My title</h2>
<div>My content</div>
</a>
Then, in your CSS, make the <a> tag displaying like a block.
a {
display:block;
}
That should do the trick.
I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.
Code : http://bootply.com/82631
What are the missing CSS I should add either to the title, panel heading, or buttons ?
I would start by adding clearfix class to the <div> with panel-heading class. Then, add both panel-title and pull-left to the H4 tag. Then, add padding-top, as necessary.
Here's the complete code:
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
...
</div>
http://bootply.com/98827
I'm a little late to the game here, but the simple answer is to move the H4 AFTER the button div. This is a common issue when floating, always have your floats defined BEFORE the rest of the contents or you'll have that extra line-break problem.
<div class="panel-heading">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<h4>Panel header</h4>
</div>
The issue here is that when your floats are defined after other items, the float's top will start at the last line-position of the element immediately before it. So, if the previous item wraps to line 3, your float will start at line 3 too.
Moving the float to the TOP of the list eliminates the issue because there are no previous elements to push it down and anything after the float will be rendered at the top line (assuming there is room on the line for all items)
Example of correct and incorrect ordering and the effects:
http://www.bootply.com/HkDlNIKv9g
You should apply a "clearfix" to clear the parent element. Next thing, the h4 for the header title, extend all the way across the header, so after you apply clearfix, it will push down the child element causing the header div to have a larger height.
Here is a fix, just replace it with your code.
<div class="panel-heading clearfix">
<b>Panel header</b>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
Editted on 12/22/2015 - added .clearfix to heading div
I placed the button group inside the title, and then added a clearfix to the bottom.
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</h4>
<div class="clearfix"></div>
</div>
Try putting the btn-group inside the H4 like this..
<div class="panel-heading">
<h4>Panel header
<span class="btn-group pull-right">
## Lock
## Delete
## Move
</span>
</h4>
</div>
http://bootply.com/lpXoMPup2d
You are part right. with <b>title</b> it looks fine, but I would like to use <h4>.
I have put <h4 style="display: inline;"> and it seams to work.
Now, I only need to add some vertival align.
In this case you should add .clearfix at the end of container with floated elements.
<div class="panel-heading">
<h4>Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<span class="clearfix"></span>
</div>
http://www.bootply.com/NCXkOtIkD6
I've found using an additional class on the .panel-heading helps.
<div class="panel-heading contains-buttons">
<h3 class="panel-title">Panel Title</h3>
<a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>
And then using this less code:
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
The h4 element is displayed as a block. Add a border to it and you'll see what's going on. If you want to float something to the right of it, you have a number of options:
Place the floated items before the block (h4) element.
Float the h4 element as well.
Display the h4 element inline.
In either case, you should add the clearfix class to the container element to get correct padding for your buttons.
You may also want to add the panel-title class to, or adjust the padding on, the h4 element.
or this? By using row class
<div class="row">
<div class=" col-lg-2 col-md-2 col-sm-2 col-xs-2">
<h4>Panel header</h4>
</div>
<div class=" col-lg-10 col-md-10 col-sm-10 col-xs-10 ">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
</div>
</div>