Hold the icon bar floating to the right and wrap the text around

Question

I have a small header line in html / css where there are a couple of icons floating on the right side. I want them to stay in position and have a heading (on the left), just wrap it below if the area gets too small on the right side. Right now my html looks like this (using bootstrap):

<div class="activity-panel-item--header"> <div class="col-sm-8"><p>02 Development, LLC v. 607 South Park, LLC </p></div> <div class="col-sm-4"><span class="icon icon-trash-o pull-right"></span><span class="icon icon-cog2 pull-right"></span><span class="icon icon-pencil3 pull-right"></span></div> </div> 

So I have col-sm-8 and col-sm-4. This ultimately will not work, because col-sm-4 is too small in certain sizes, so I need to make the right column with the icon with the width set (say 140px). Therefore, if you set the minimum width on the right side, it will be divided into smaller sizes.

What interests me is whether there is a way for this header on the left side in col-sm-8 to move along the dial width buttons on the right side when responding (I basically want the buttons to stay in the same place all the time). Something like if the buttons on the right were absolutely positioned, but not from the stream, so the text responds to it.

Here is the fiddle I was cheating https://jsfiddle.net/DTcHh/24085/

EDIT

So, I improvised the solution by doing the following: - removing the right element of the icon from the house stream, absolutely positioning it and giving it a set of c - adding the same width as adding to the element, wrapping both left and right elements

Then I could just end my colleagues. The code looks like this:

HTML:

  <div class="activity-panel-item col-md-12"> <div class="activity-panel-item--header"> <p>02 Development, LLC v. 607 South Park, LLC </p> <div class="activity-panel-item--header--iconbar"> <span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span> </div> </div> <div class="activity-panel-item--body"> <p>test 123345.</p> <h3></h3> <p>cases</p> </div> </div> 

CSS:

 .activity-panel-item { height: 100%; padding: 0; } .activity-panel-item--header { position: fixed; width: 100%; top: 0; left: 0; padding: 12px 125px 12px 12px; min-height: 50px; background-color: rgba(0, 0, 0, 0.8); } .activity-panel-item--header p { color: #fff; } .activity-panel-item--header .icon { cursor: pointer; color: #fff; margin: 0px 12px; font-size: 20px; } .activity-panel-item--body { overflow-y: auto; padding: 10px 20px; display: block; width: 100%; height: 100% } .activity-title-input { width: 100%; } .activity-panel-item--header--iconbar { display: block; float: right; top: 10px; right: 10px; width: 125px; min-height: 50px; height: auto; position: absolute; } 

See working script: https://jsfiddle.net/DTcHh/24114/

Any and all input will be useful, or if someone has a different working approach, which will also be great. Thanks!

Answer 1

You can do this without bootstrap col-*-* and providing an explicit width for both divs, plus a bit of extra style for your icon bar.

Updated Code

 <div class="activity-panel-item--header"> <div class="pull-left" style="width: 75%;"> <p>02 Development, LLC v. 607 South Park, LLC </p> </div> <div class="pull-right" style="position: absolute; right: 0px; min-width: 25%;"><span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span></div> </div> 

jsFiddle

EDIT 1

If you think deeply in accordance with this decision, we are both at the same point. Let me explain that I give a minimum width of 25% for the icon bar and 75% width for the left element. This means that, depending on the situation, the width of the icon bar may increase, but it should be at least 25% total screen or container, and the width of the left element should be 75% , which may decrease depending on the situation.

And you give a width of 125px or any line of the icon, which means that it can increase or decrease depending on the situation, but the original is 125px

Here I mean the area and screen resolution. If the icon is larger and does not fit in 25% , then this width can be increased, and the left element can be reduced, just like your edited case, if the icon bar does not fit at 125px , then this width can increase, because we we will not specify the maximum width to the icon bar or the minimum width to the left element.

.

EDIT 2

I hope this is not illegal in stackoverflow to edit the answer as many times as I need.

Besides coding, some math can be done. Suppose we have 3 icons (32x32) each. Thus, the total width of the icon wrapper (32 + 32 + 32) 96px adds a bit of 12px edge to each icon (12x3 = 36) on the right side for beauty. Now the wrapper width is 96 + 36 = 132px . And we are on a device with a width of 400px . My icon wrapper (25%) is 100px out of 400px (device width), and your wrapper is 125px . I say that the minimum width of the wallpaper for the browser in the OK browser is 100px , but if the icons are no longer fit in 100px , you can increase this width to suit your needs. In this case, it will increase 100px to 132px or Any. But I do not want to break these icons on the next line. They should be displayed in the original size and style (32x32) plus margin. You can split the left content (text) to wrap these icons, but do not break the icons themselves. They should keep their original size. No matter what the width of the device. Browser, please do not reduce the size of the icon, just increase the width of the wrapper.

And your 125px less than 132px . Thus, your shell will break and one of its icons will move to the next line. Until you need CSS and explicitly write 132px or any of the width . And what if after a month your boss said, please put a 40x40 badge and after 3 months and so on ...?

Try it, place the big icons and see what happens to your width: 125px .

Answer 2

If I do not completely understand you, here is an easy way. There are too many CSS classes, so I used my own, but you understood the concept.

 <div class="top"> <div class="content1"> <p>02 Development, LLC v. 607 South Park, LLC </p> </div> <div class="content2"> <span>1</span> <span>2</span> <span>3</span> </div> </div> <div class="content3"> <p>test 123345.</p> <h3>Nothing Here</h3> <p>cases</p> </div> 

Demo: https://jsfiddle.net/norcaljohnny/ovo83p5k/