Make link wrap to avoid overflowing into other elements - html

I want to format this so that the link wraps to a second line and the delete stays vertically centered in the well, rather than the delete dropping down to get out of the way, as it is in the fiddle below. Nothing I have tried so far has worked, but I'm admittedly pretty poor with CSS.
Code:
<div id="listing_10" class="well">
Words words words words words words words words words words words
<span class="pull-right">
<a style="text-decoration: none" class="delete_listing" href="#">
<i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong>
</a>
</span>
</div>
Here's the jFiddle http://jsfiddle.net/ohbnkok8/4/
Note:
The text of the link will be at most 50 characters.

Are you looking for this???
Add few CSS
a {display: inline-block; max-width: 80px; vertical-align: middle;}

I ended up using the bootstrap grid system to make things work. The delete button isn't centered, but it is always even with the top line, which for the typical 1 line case that I'll be seeing will make it centered, and still looks nice when there are 2 or 3 lines.
<div id="listing_10" class="well">
<div class='row'>
<div class='col-md-9 col-sm-8 col-xs-7'>
Words words words words words words words words words words words
</div>
<div class='col-md-3 col-sm-4 col-xs-5 text-right'>
<a style="text-decoration: none" class="delete_listing" href="#"><i class="fa fa-lg fa-times-circle danger"></i><strong class="danger" style="vertical-align: middle"> Delete</strong></a>
</div>
</div>
</div>
See jsfiddle http://jsfiddle.net/ohbnkok8/12/

Related

HTML: Paragraph text doesn't stack up to rows. (All the text is in one line and out of paragraph)

I'm using twitter-bootstrap grid system and you can see the problem right here.
The text which is supposed to be in the center keeps outgoing from the center to right side as you can see...
<div class="row mt-2">
<div class="col-3"></div>
<div class="col-6">
<div class="text-left">
<p class="d-0">
<span id="issuer_msg" style="white-space: pre-line">{{msg.message}}</span>
<br>
</p>
<div class="text-center">
<small class="text-primary font-weight-normal">{{msg.sent_time}}</small>
</div>
</div>
</div>
</div>
How can I fix the problem?
The problem is from your inline styles where you used "white-space:pre-line"
Try using "white-space:pre-wrap" instead
I think the problem is coming from your small tags. Wrap paragraph around it.

Bootstrap 4 row not center aligned

I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!

Text is not aligned properly on row

See the following example:
<div class="row">
<div class="col-2">
<p>Error</p>
</div>
<div class="col-8">
<div class="progress error" data-toggle="tooltip" data-placement="bottom">
<div class="progress-bar error-bar" role="progressbar"></div>
</div>
</div>
<div class="col-2">
<a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
<i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
</a>
</div>
</div>
The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon. I tried adding vertical-align: top to <p> but it did not make a difference. How do I correctly vertically align the text?
You can add line-height: 1rem; to <p>
Try to add the class align-items-center to your row, this will make all cols vertically aligned in the center of the row.
If you have any question about the Bootstrap grid system, check out the documentation, that's pretty good by the way.
The property vertical-align only applies to inline and table cells elements, check out the MDN documentation about that. So, vertical-align will only work if your <p> element is an inline element, and if has enough height to be aligned.

Text wrapping to next line on screen resize

I have a UI where I display an icon with some text(on the right side) in the same row on a tile.
The problem here is that when I resize the screen, the text gets wrapped to the next line and even if I decrease text size, it still does not align next to the icon.
Can anyone help me out?
Here's a visual representation. This is when screen is full size:
And then this is what happens when it is resized:
How do I bring the text next to the icon like in the original size (full size)?
Here's the code for displaying the icon and text:
<div class="row">
<div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-md-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change col-md to col-xs
<div class="row">
<div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-xs-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change the cols to a single line, like col-md-12. Then apply the icon as a background.
Alternatively, use
<div class="col-md-2 col-xs-2">
and so on.
Depending on your layout, you may need to adjust the cutting points, so the first approach is always better and desirable

Center divs to match logo/lead

On my web page I have a centered logo/lead along with two divs below the logo/lead. I wish to make the divs seem centered in accordance to the logo/lead.
I have attempted to center the divs by using Twitter Bootstrap's spans but the divs are still not truly centered.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span4 text-glow-hover-with-delay">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
If you need more information you can take a look at the website: http://guru.jire.org
You can make them appear truly centered by changing the span4 to a span3 (odd-equality rule) and then setting the divs to align-center. Full source below.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
It may help to look at it this way:
The borders on the divs help you see what is happening, the diagonals show you where the true center is.
If you give the divs consistent widths they will look more symmetrical and centered, that may be all you need to get the look you want.