code
Hello how are you
output
Hello how are you
Why it's not rendering like this I need like this.
Hello
how
are
you
how to achieve output like this without changing in HTML?
<p style="width:165px;height:80px;border:1px solid red">
Hello how are you
</p>
See live example here http://jsbin.com/amozu4
i need link like this
Hello
how
are
you
<a style="width:40px;display:inline-block;">
If you're going to render a list, then make it a list. Even if it means repeating the link for each item.
<ul style="list-style:none;">
<li>london</li>
etc
The advantage of this is that you can also at any time make it a sentence, by making all li elements display:inline.
you can get that using this :
a { white-space:normal;}
Adding display:block;width:40px;white-space:normal works for me.
Related
I'm having an issue where an unordered list created by data-sly-list is adding whitespace that isn't represented in the DOM or by any class. If I manually code the list rather than letting data-sly-list handle it, the whitespace isn't added.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<div data-sly-unwrap data-sly-list.slidesNode="${resource.listChildren}">
<div data-sly-unwrap data-sly-list.states="${slidesNode.listChildren}">
<li data-sly-test="${states.valueMap.flag}">
<sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}" data-sly-unwrap>
${states.valueMap.name}
</sly>
</li>
</div>
</div>
</ul>
</div>
If I hardcode the list like the following, there's no whitespace
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
</ul>
</div>
There's also a htmlpaths.js involved:
"use strict";
use(function() {
var path = this.thePath;
var httpRegex = /http/;
var hashRegex = /#/;
if (path !== undefined && (httpRegex.test(path) === false && hashRegex.test(path) === false)){
path = path + '.html';
}
return {
href: path
}
});
The only difference I see is that its run through Sightly iterating. Is there any fix to this? In addition to listing I'm trying to break them into columns with the following CSS
li {
width:25%;
float:left;
display:inline;
}
This works perfectly fine on the hardcoded list, but on the Sightly iterated one it creates all kind of weird spacing issues that change based on screen width
This whitespace isn't accounted for at all in the DOM. I'm not sure what to do.
More weirdness:
If the margin top is set to -9 or higher, it looks like the above screenshot. But if its set to -10 or lower, it looks like this
It's like its a breakpoint, it goes from one extreme to the other on that one pixel change. No change otherwise. It's bizarre.
It's a little weird behavior in sightly, when you have some extra spaces in your HTML code, it will display with extra spaces in the HTML.
Try to remove all the spaces in the HTML as shown below and try it.
<div class="bullets"><ul class="columns unordered-list" id="stateList"><sly data-sly-list.slidesNode="${resource.listChildren}"><sly data-sly-list.states="${slidesNode.listChildren}"><li>${states.valueMap.name}</li></sly></sly></ul></div>
You can use HTML formatter in your IDE or online tools like below to format the HTML for a readable format
https://www.freeformatter.com/html-formatter.html.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<sly data-sly-list.slidesNode="${resource.listChildren}">
<sly data-sly-list.states="${slidesNode.listChildren}">
<li>${states.valueMap.name}</li>
</sly>
</sly>
</ul>
</div>
This should get rid of the extra spaces in your HTML.
Also, it is best to use sightly tags wherever we need some conditions to check or embed them directly in the actual div tag or html tags instead of using data-sly-unwrap.
You can also use sling models to get the required data and check all the conditions(including appending html) in the backend and send the data just to display and avoid all the conditions in sightly.
Using data-sly-unwrap or a sly tag still adds an empty line in the generated HTML. Even though most browsers ignore those spaces, they might cause issues in some cases. If you want the HTL output to look similar to your hardcoded HTML, try placing the use statement and anchor tag in a single line as shown below.
<div class="bullets">
<ul class="columns unordered-list" id="stateList" data-sly-list.slidesNode="${resource.listChildren}">
<li data-sly-repeat.states="${slidesNode.listChildren}" data-sly-test="${states.valueMap.flag}"><sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}">${states.valueMap.name} </sly></li>
</ul>
</div>
Also, a few tips
The sly tag doesn't need a data-sly-unwrap. It is automatically
removed in the generated HTML.
data-sly-list can be added to the parent ul tag itself instead of introducing an extra div tag and then unwrapping it.
Use data-sly-repeat instead of data-sly-list wherever possible. I was able to bring down the generated HTML of one of our complex pages from 20k lines to 12k lines, as data-sly-repeat doesn't introduce additional white spaces.
Solution
The issue is on line 7 of your HTL template:
${states.valueMap.name}
You have a space at the end of the inner HTML of your tag ;)
Unrelated
Regarding your htmlpaths.js script, are you aware of Transformers in AEM? You can use them to implement a global Link Rewriter which will fix links when a page is rendered, much like your script does. You can see an example here: https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html
If you decide to keep htmlpaths.js, you may want to review it because I'm afraid there might be some problems with it. Of course, I don't know your requirement so it's just a suggestion :)
Is there a way to force a part of a text to display on a new line with CSS?
So when the HTML looks like this:
<p>Hello, my name is John.</p>
The result will be:
Hello,
my name is John.
The HTML is generated dynamically, so I cannot change it.
p::before {
float: right;
width: calc(100% - 3.6em);
height: 1em;
content: '';
}
<p>Hello, my name is John.</p>
Please note that this is rather fidgety: the 3.6em is somewhere in between the width of "Hello," and the width of "Hello, my". So this depends on the font as well as the word(s) you need it to break after. I had to experiment a bit with different fonts to find a good average size.
The short answer is, you cannot split a text without writing code in between your texts.
Follow this link which provides a good solution.
How to give line-break from css, without using <br />?
But this does not even consider where to split the lines automatically. If you want something more automated, you need to use php or javascript.
Here is an example from another link:
SPLIT HTML INTO different lines
Check and let me know if it helps you.
Thanks
S
There are many ways how to do it.
First is using the <br> element of HTML
<p>Hello,<br> my name is John.</p>
Second is to put both of it in <p> tag
<p>Hello,</p>
<p>my name is John.</p>
Third is by putting both of it in <p> tag with css attribute and value clear:both - this is to make sure that no element will be floated in left or right
Try the codes below and hope it helps you.
p {
clear: both;
}
<p>Hello,</p>
<p>my name is John.</p>
All of it will output
Hello,
my name is John.
<p>Hello, <br>my name is John.</p>
or just put another <p></p> tags
<p>Hello, </p> <p>my name is John.</p>
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
Hi there I am not sure how to go about a particular problem so here it is.
Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.
So far I have tried this:
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
I use a separate stylesheet
and have tried such things as display inline with no luck.
I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.
Thank you.
You need another set of containers indie your container:
<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )
You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)
#container {
display: flex;
}
For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.
And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies
If I understand what you're wanting to do. You could give the tag a class/style and do float:right in the CSS. Which would look like this:
<p style="float:right;"><img src="image.jpg" /></p>
Do yo want text flow around image? If yes then it is something like this:
http://jsfiddle.net/2FMPf/1/
If you want separate column for image, then it is something like this:
http://jsfiddle.net/2FMPf/2/
I have thousands of articles with inline images like this:
<img src='...' align='left'/>
and
<img src='...' align='right'/>
I would like to add padding using CSS as follows, but it doesn't work:
img[align=left] {padding-right:10px}
img[align=right] {padding-left:10px}
This seems not supported?
This works for me (with or without quoting the value) on Win7/Chrome/8 and Win7/FF/3.6: http://jsfiddle.net/gLe3U/
You'll need to provide more details on the OS/browser/version giving you trouble, and perhaps provide a full test case (e.g. through http://jsfiddle.net)