In Flex there is a container component called HGroup that lays out it's contents horizontally. What would the equivalent to the following be in HTML:
<HGroup gap="10">
<button width="50"/>
<button width="10"/>
<button width="100"/>
</HGroup>
The features of the HGroup, for HTML developers, are that each item in the HGroup tag is positioned after the previous item. In the code above each button would be placed after the last. The gap property specifies how much space is between each item. The hgroup fits the width of all it's elements and does not wrap around to the next line. There is a verticalAlign property that aligns the elements top, middle or bottom.
I think a div or span tag with some sort of no wrap style the closest tag that mimics the HGroup behavior?
On the elements that you want to be inline you set the display style to inline. Example,
<div name="HGroup531" style="position:absolute;left:138px;top:107px;width:180px;height:23px;">
<input type="button" name="Button605" style="display:inline;padding-right:2px;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
<input type="button" name="Button635" style="display:inline;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
</div>
At least this is how you do it to the best of my knowledge.
Related
I have several buttons contained within divs that I would like to place on the same line. Two of the buttons are only displayed if a certain value is greater than 0. I added display:inline-block in a div container thinking that would place all of the enclosed divs on the same line but it didn't. I also need the buttons to float right (hence the style="float:right in the container div. I've also tried placing display=inline on each of the buttons which didn't work. Here is my HTML:
<div style="display:inline-block" style="float: right;">
<div *ngIf="menu.itemNumber > 0">
<button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
<button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
</div>
<button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button>
</div>
Why aren't the buttons showing up on the same line?
Its because you have a div inside which is block by default. Apply display:inline-block to all elements inside parent button div
Stack Snippet
.main>* {
display: inline-block;
}
<div class="main">
<div>
<button></button>
<button></button>
</div>
<button></button>
</div>
Your inner div (<div *ngIf="menu.itemNumber > 0">) is still a block level element. You need to give it display: inline-block, for it to be inline with the following button.
Also, do not duplicate the style property on your wrapper div. Combine the styles in one string: style="display:inline-block; float: right;" (this is assuming you still want the outer div to be inline-block - it may not need to be).
I also learned that sometimes, depending on the size of the content inside your buttons, or sibling elements, they might not be in the same baseline, meaning some will be higher than others, even if they are side by side. The way to fix baseline issues is to use a special kind of overflow (Like hidden or auto) on the sibling elements
EXAMPLE:
div sibling-elements{
overflow: hidden;
}
I have a couple of divs sat side by side that need the button to be on the bottom.
I need the button to sit on the bottom of the .col-sm-4 container, without the h3 tag pushing it further out. Does anyone have a hack or some kind of solution?
The h3 tag size needs to be responsive as its text may change. I've got it to a point where the boxes are pushed out of the container, but now I'm stuck.
____________________Better explanation_______________
My h3 tag is pushing my .col-sm-4 outside of the container. I need the button to be at the bottom of the div.
In this js.fiddle, I have provided two divs. The first one is where I want the button, but I need the h3 tag to look like div 2. I can't seem to achieve the second div without the button being pushed out of the container.
https://jsfiddle.net/19obrm0q/1/
edit - h4 -> h3.
You can't put an element with nonzero height in the same container as a full-height div and expect both to fit in 100% of the parent's height. That's what height: 100% means.
I've tried again, this time keeping the h3 outside the col-sm-12 as required. To make this work I've moved the full-height class up a level to the col-sm-4. I also had to move the center-bottom element outside the col-sm-12. This is because now that the col-sm-4 is the element with defined height, it should also be the element which defines the position context for the absolute element.
https://jsfiddle.net/19obrm0q/7/
First, your markup was a little different between the two columns: one had the h3 inside the parent div and the other had it before/outside, which was contributing to making them look different.
But my suggested solution is to pad the bottom of the parent so that there's sure to be room for the absolute positioned button.
Have a look:
https://jsfiddle.net/19obrm0q/3/
https://jsfiddle.net/19obrm0q/5/
After much fiddling about: BEFORE:
<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
<h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
<p class="clear-margin">SOME TEXT</p>
<div class="center-bottom">
Learn more >
</div>
</div>
</div>
and AFTER:
<div class="col-sm-4 no-pad bg-white">
<h3 class="clear-margin text-banner-activity text-center">heading</h3>
<div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
inner
</div>
<a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
button
</a>
</div>
I moved the divs around and got rid of the div that was nesting the button, and now it works, the button sits on the bottom no matter the size of the column.
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
With this:
<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" value="push me" />
</div>
The button is aligned to the center of the browser window (as desired) in FF, Chrome, IE7 and IE8.
But, add "display:block" to the button:
<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" style="display:block;" value="push me" />
</div>
The button is aligned to the center in IE7 - and is not aligned to the center in FF, Chrome and IE8.
Why? And can a button (or any <input>) with display:block be center-aligned in some way? (other than using <center> - which works on all browsers mentioned, btw - but is "forbidden"...)
This way it can work:
<input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" />
To force a block input (originally display:inline element) to be centered, you have to set a fixed width and then the margin to 0 auto ;)
from the css standard:
This property describes how inline contents of a block are horizontally aligned
so when your elements (no matter what they are, divs, spans, inputs, etc.) are inline, text-align has an affect on them, and when theyre display:block, by standard definition, text-align will not align them
you can fix this by setting margin:0 auto and fixing a width, like steweb suggested, or alternatively (depending on your specific requirements):
<input type="button" style="display:inline-block;" value="push me" />
Elements that are displayed as blocks are centred with auto margins. The text-align property should only centre inline children. Internet Explorer has bugs surrounding this.
I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
How can I force the div to expand so that both buttons are on one line?
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.
Didn't need to toy with max-width, max-height, white-space, or anything else.
Hope that helps someone.
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
Here is an example:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflow property for the chunk of the content outside of the parentDiv border.
Good luck!