vertical positioning for textarea via input-group in bootstrap - html

I want to position the elements via input-group attribute, one of which is textarea and next ones are a couple of glyphes and button, not really important, i suppose. I want to put it in vertical order, not horizontal one which is provided by default input-group.
How can i do it in the right way?
Update: code example here. as you can see, all the elements are positioned horizontally. I want to move the glyph + button block on next line. How can I do it without regreting of input-group attribute?
HTML:
<div class="textareaField input-group">
<textarea class="form-control custom-control" rows="3"></textarea>
<div class="textareaFooter input-group-addon">
<span class="glyphicon glyphicon-picture"></span>
<span class=" btn btn-primary">Send</span>
</div>
</div>
http://jsfiddle.net/sva6nr8z/

OK, change your CSS to this:
.input-group textarea{display:block; float:none;}
.input-group .textareaFooter{display:block; float:none; clear:both; width:100%;}
.input-group .glyphicon-picture{display:block; float:none; margin:20px auto;}
.input-group .btn{display:block; float:none; clear:both; width:100%;}
Of course you'll need to adjust margins and sizes to your needs, but the important part is to give a display:block property to both textarea and .textareaFooter
See JSFiddle

Related

Resizing div according to the textarea

I created a div to create this input area, however, it's evident that this div will run across the whole page. Whenever I try to style, say add a border under the legend, the border runs across the full page. What I want is to restrict the width of the div to the textarea box, so that even the border runs across only from the start of the textarea to the end of the textarea.
By default, a block element will grow to occupy the available inner width of it's parent. To have it shrink down to the size of it's largest child, use display: inline-block instead.
div {
border: 1px solid red;
display: inline-block;
}
<div id="input_area">
<fieldset>
<legend>Input Text</legend>
<textarea rows="10" cols="80"></textarea>
</fieldset>
</div>
you can put a wrapper around it assuming you wanted it on its own line:
<div>
<div id="input_area">
<fieldset>
<legend>Input Text</legend>
<textarea rows="10" cols="80"></textarea>
</fieldset>
</div>
</div>
and then with your css change your input area to an inline block.
#input_area {display: inline-block;}

Why div element will separate when re sizing even though I have inline-block?

When I shrink the browser + button separated between checkbox event though both div have inline-block
Please see the mini version of the code:
<div style="display: inline-block;">
<a class="plus" data-toggle="collapse" data-target="#data" href="#">
<i class="fa fa-plus-circle"></i><span></span>
</a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
<label>
<input name="unique_id" value="" type="checkbox">
<div id="unique_id">name - address <span class="label label-info">display</span>
</div>
</label>
</div>
But I just want + button and check box will place together when re sizing like this image( without re size )
When using inline-block on your elements they wrap with the parent width. So if you have a parent DIV to your structure juste add white-space: nowrap; to it. It will prevent the children with ìnline-block`to wrap (go under).
EDIT : You could also simplify your HTML structure, you have a lot of elements for a simple thing.
Set the width to both Div or add "float:left" to both div with some width to second div.
white-space: nowrap;
will force the content to stay on one line
Does it fit nicely if you made one of the divs a little shorter?
Reason because even with inline-block, two divs with a width of 50% might not actually fit in one row. There's a little space in between them. Not sure where it comes from; someone here should be able to provide the exact reason why.
But for me personally, what I'll do is wrap the two divs and give that parent div style="font-size:0;". Only caveat with this is that you must explicitly set the font sizes of the children div.
See JSFiddle

How do I center text in a span?

Please see this website
How do I get the test TEST to be in the middle of the span it is contained in?
This is using Twitter Bootstrap.
I have tried loads of different ways, like css, inline styling, setting margins, etc but I cannot get the span to do what I need. It appears as though its being drawn to the exact width of it's text.
My main aim is actually to be able to bring the text Nationwide Alerts down so that it is on the same row as the buttons.
The tricky thing is that I cant give this span a hard coded width because of the page being resized
Paul
Just adding that you can now simply use css flexbox to position text inside any element including spans.
The original link is no longer working, but this should center the text horizontally regardless of the size of the element.
span { display: flex;
justify-content: center }
If you want to align vertically, use align-items: center
Put a background color on the span to see why it isn't working. Those three items are in a div with no CSS associated with it. In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties.
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="centerTest">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
with whatever name you want & use
.centerTest {
width:100%;
text-align:center;
}
Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:left to your btnPrevious id. I would refrain, as much as possible, from using inline CSS unless you are designing HTML email, so just create a CSS file that you include LAST in your list of CSS files and add your edits to there.
For example, if btnPrevious is in your template's CSS file, in YOUR CSS file, just add
#btnPrevious {
float:left;
}
and you're good.
EDIT:
Sorry missed the Bootstrap part as I just did a search for TEST inside your code. Bootstrap is built with these classes, and being that those are already inside of a container, you should be able to add text-center to the blank div and it should do the trick
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="text-center">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
Spans are, as you suspected, drawn to the exact width of it's text. You can circumvent this by setting it's style to display: block; width: 100%;, or any width you would like. This will mess up everything in your case, since you have other elements before and after the span itself.
Therefor you'll need to in addition set it's position to absolute.
Using bootstrap 2.3.0, there is a .text-center class you can use 3
<span class="text-center">...</span>
and a pagination-centered for bootstrap 3
<span class="pagination-centered">...</span>
You can also use
margin-top: auto;
margin-bottom: auto;
Or if using TailwindCSS my-auto

bootstrap 3 button group in panel-header not centering

I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
here's the HTML:
<div class="panel panel-default">
<div class="panel-heading">
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
<div class="panel-body">
test
</div>
<div class="panel-footer">
test
</div>
</div>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.
You should add the class pull-right to your .btn-group div, instead of specifying float:right.
When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/
You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.
add
.container{
line-height:2.2;
}
along with what David has suggested above to have the text truly in the center vertically.
check fiddle
I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
.panel-heading {
overflow: hidden;
}
and using:
<div class="pull-right">
here you are the example: Jsfiddle example
You can use a trick for that ;)
...
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
<div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
...
Good luck - S.M. Mousavi
I solved this issue for myself today. All of the seemingly-working suggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
If you look at #ithcy's answer, and jack up the font-size, you have a problem (demo).
The more googling I did, the more I became convinced that CSS's vertical-align was what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaris that better explained what vertical-align is,
The vertical-align property can be broken down into three
easy-to-understand steps:
It only applies to inline or inline-block elements
It affects the
alignment of the element itself, not its contents (except when applied
to table cells)
When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
and more importantly is not:
The common misconception about vertical-align is that, when it’s
applied to an element, it will make all the elements inside that
element change their vertical position.
My solution was to use CSS table formatting (which is what vertical-align is for, after all) instead of the floats that Bootstrap provides with pull-left and pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
HTML
<div class="panel-heading table-style">
<span class="panel-title">Member of...</span>
<div class="button-wrap">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
</div>
CSS
.panel-heading.table-style {
display: table;
width: 100%;
}
.panel-heading.table-style .panel-title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.panel-heading.table-style .button-wrap {
display: table-cell;
vertical-align: middle;
text-align: right;
}
I made a demo of the way I'm using it, which I'm sure can be improved on.
I am very aware that the btn-group has a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.
It's very late, but I simply solve by this css:
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}

Bootstrap 3 - Align font-awesome icon inside button vertically

I am trying to align some font-awesome arrow vertically inside two Bootstrap buttons.
Actually both the text and the icons should be vertically aligned in the middle of the button.
If the text inside falls into a single line or wraps in multiple ones the arrow icon should always adjust to the middle of the total height of the button, if that makes sense.
I've been trying to sort this one out for hours now but for the life of me I can't figure this out.
Here's the markup:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
<button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
</div>
</div>
and here's a jsFiddle (updated) with what I currently have. Please note that the red background of the icons should touch the edges of the button (top/bottom/right) as opposed to what it is now.
Set both elements to display inline-block and then set the span to take up a percentage of the space. In this case 90% / 10% seems to work good.
span {
vertical-align:middle;
display:inline-block;
width:90%;
}
To remove the padding you can do this: (probably want to add a some left padding)
.btn-foo1,
.btn-foo2 {
padding:0;
border:0;
}
Change display to inline block, and remove right float:
.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=" icon-"] {
background-color: red;
display:inline-block;
vertical-align:middle;
padding:24px;
width:10%;
}
Demo:
http://jsfiddle.net/9brbD/19/
Also I would add a class to the span, instead of using span {} use myClass {}.