I'm editing a piece of html email template.
I've been trying to apply text-indent property to a text using an styling as following:
<style>
#Indent {text-indent:1em}
</style>
<p id="Indent">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
But it doesn't run properly in browser.
At the same time inline styling for this property runs perfectly well in broswer:
<p style="text-indent:1em">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
All other stylings in the document I did using id attribute and they work perfectly fine.
Is there a way to style text-indent in the similar manner so I won't have to make a single inline styling in a single document?
Related
I have an image and a text side by side (image to left, text to the right).
Any idea on how to get the image height to resize according to text paragraphe height (and width staying proportional to height) instead of wrapping text around the image.
This is as far as I was able to go :
<div style="display: table; width: 100%;">
<div style="display: table-cell;">
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div style="display: table-cell; vertical-align: top;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Maybe a flex solution like this :
Go full width and resize the screen, it's working but there is some bugs when the image start growing faster (so we may limit this with media query or max-height)
.container {
display: flex;
width: 100%;
}
.container>div:nth-child(1) {
flex:0;
width: fit-content;
}
.container>div:nth-child(2) {
flex: 1;
}
img {
width: auto;
height: 100%;
max-height:500px; /* Limit the height to avoid bugs when the image get bigger */
}
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Here's what you're asking for:
Image changes height according to paragraph height. Which means...
Image changes width, which means...
Paragraph re-flows in remaining space, most likely resulting in new height, which means...
You're back to step 1.
Given the above, there are two possible scenarios:
You're lucky and at some point 3. won't result in paragraph changing height, hence not triggering 1. => your script stops.
You're not so lucky and 3. always triggers 1. alternating between 2 image heights / paragraph reflows. The page dances/flickers before you and it's blocked rendering until it crashes the browser.
Additionally, in some cases the image will get enlarged way above its natural size, which should be avoided.
With the reserve it's really not a good idea to use this in a production environment, here is what you asked for. To my surprise, at least for the image + paragraph you use in your example, it doesn't crash the browser. But I'm pretty sure there are sizes at which it would. Feel free to test it out:
function bestFit(el) {
let image = $('img', el),
paragraph = $('p', el);
if (image.width() < paragraph.width() / 1.5) {
image.css({
height: paragraph.height() + 'px',
width: 'auto'
});
if (image.height() !== paragraph.height()) {
bestFit(this);
}
} else {
image.css({
width: image.closest('.best-fit').width() * .4 + 'px',
height: 'auto'
});
}
}
function resizeImages() {
$('.best-fit').each(function(){bestFit(this)});
}
$(window).on('load resize', resizeImages);
.best-fit {
display: flex;
position: relative;
}
.best-fit img {
padding: 1em 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="best-fit">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Edit: I've added a small tweak to not allow image to get above 40% of total width.
in IE 9 related to the browser's zoom function.
In the code below,i have a set of div (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide). The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%) The inside divs are repositioned during the zooming and the initial position is lost. Please notice that this only occurs in IE.
Is there a way to fix this?
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
<head><!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=crap.html">
<![endif]-->
</head>
no needs to be IE <= 9 today
The div class="col-md-3" are created dynamically. And I want them to wrap down after four divs are created. If i delete any div I want them to wrap up again.
Is this possible?
<div class="row">
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
<div class="col-md-12">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;"></div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="col-md-3" style="border:1px solid black; min-height:50px;">
This should be placed under the first 4 divs.
</div>
Now It looks liks this. And that's not what I want.
You can achieve it with help of bootstrap's rows. First of all no need to give min-height:50px to a div. Secondly Boostrap is based on 12 column grid, which means if the sum of columns in a row extends 12 then the new column will go down.
For
col-md-3 + col-md-9=col-md-12 or col-md-4+col-md-4+col-md-4 = col-md-12.
If you want to have not more than 4 columns then you should write:
col-md-3 + col-md-3 + col-md-3 + col-md-3
and this will form a row.
You can make experiments here: http://jsfiddle.net/johannesMt/he3fzkhn/
In case you want to remove a certain div from a row and make others to substitute it then you can use a masonry jquery plugin which works very well with bootstrap.
A good references can be found here:
http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/
http://www.bootply.com/123353
I have a jsfiddle here - http://jsfiddle.net/bva700wx/5/
It's a really simple bootstrap layout.
It's 2 row's that contain cols with an image and one with text.
The text and the image can vary in height.
I need the height of both columns to be the same.
If the text is taller I need the image col to the same height
If the image col is taller I need the text col to be the same height.
I then need the vertically center the image and the text.
I thought this would be easy with display: table; and display: tabel-cell;
Any see what I doing wrong
<div class="container">
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x150" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
Floating interferes with vertical alignment. I modified your fiddle to give you a working example.
I have started making a grid and each row has a class ".row" and inside that are classes with .col-3-12 for the width of the div and they float left what I want to do is create a class called .centred and have that inner div that is floated centred. At the moment it centre's the div at 50% it need's a -50% somewhere to make it in the middle codepen
<div class="row">
<div class="col-3-12 centered">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.row [class*="col-"].centred {
left: 50%;
}
.col-3-12 {
width: 23.5%;
}
Try adding a negative margin-left as below:
.row [class*="col-"].centred {
left: 50%;
}
.col-3-12 {
width: 23.5%;
margin-left:-11.75%;
}