The issue I am facing now happens in an automated form generated by JS, which is using controls trimmed in DIVs. The resulting HTML is given here:
<div id="E0" style="width:200px;" class="FLD">
<div style="flex: initial;">Val A：</div>
<input type="text" style="flex: 1 1 auto;">
</div>
<div id="E1" style="width: 600px;" class="FLD" lf="1">
<div style="flex: initial;">Val B：</div>
<input type="text" style="flex: 1 1 auto;">
</div>
<div id="E2" style="width: 400px;" class="FLD">
<div style="flex: 1 1 auto;">Val C：</div>
<input style="width:60px; flex:initial;" type="text">
</div>
The associated CSS:
.FLD{ display:inline-flex; flex-direction:row; }
.FLD[lf]::after{ /* The issue described below*/ }
Note that the "inputs" above may be different elements and the above is just "private case".
The issue:
As from the above structure, I expect the DIV "E0" and DIV "E1" to be in the same line, while "E2" in a separate line below (assuming the parent container wide enough, at least).
The DIVs will appear all inline (because by default I want them to be like this). However, the attribute "lf" if set (can also be set by JS internal property), shall virtually add <br> element after the DIV.
If I create <br> element after the DIV, it will make a problem if I want to remove the DIV in one command also its "<br>" - as they become 2 separated elements - and as this appears in SPA, I want to have a clean removing function or hidding function to handle that element only, without considering "trailings".
If I use "display:flex;" instead of "display:inline-flex" for just that one particular element, the situation will become all DIVs in separate lines (not inline element which happen to be the middle one, will cause the previous to be on top and the next below it).
The last approach I thought to use, is .FLD[lf]::after{ content:'' } selector - but then, my question is comming:
Is there such possibility in CSS to somehow add line feed (something like "<br>") after DOM element? I have tried "content", but it seems working on text-string only, so even "\n" is not doing what I want. I believe that is not possible, but maybe I am wrong and there is another way...
I don't think that what you re asking is possible. But...
You can use float and clear css properties combined:
#E0, #E1, #E2{
float: left;
}
#E2{
clear: left
}
This will arrange your divs in a similar way
Is it possible to remove white space at the end of text with CSS (or optionally with JS)? I've tried all kinds of display property, but none of them seem to work. I would need to dynamically insert a blink-div at the end of multi line sentence. Currently it's is being added outside of phrase-div that contains sample text (which, as a div, is rectangular with white space I don't need). HTML structure looks like this:
<div id="writr-div">
<div id="phrase-div"></div>
<div id="blink-div"></div>
</div>
Please check out the both images:
Original:
Desired effect (border and background are for preview purpose):
EDIT:
Okay, I may haven't made myself clear enough. This is what I want (that's not an absolute position, I need it to be at the end of the sentce, no matter how long it is):
Thanks,
Luca
Simply use span:
#writr-div {
width:140px;
border:1px solid;
}
#blink-div {
border:1px solid red;
}
<div id="writr-div">
<span id="phrase-div">Some text here and there</span>
<span id="blink-div"> another text</span>
</div>
I am converting HTML into PDF and its working perfectly but I have an issue with how data is being displayed.
I have an array of strings and I am looping through them and displaying them within my ejs template.For example:
<div style="page-break-after: auto; padding: 10px;">
<h3>Cost Saving Calculation:</h3>
<p><%= modules[i].costSavedInfo %></p>
</div>
<div style="page-break-after: auto; padding: 10px;">
<h3>Culture Change</h3>
<p><%= modules[i].cultureChange %></p>
</div>
<div style="page-break-after: auto; padding: 10px;">
<h3>Other Efficiency</h3>
<p><%= modules[i].otherEfficieny %></p>
</div>
The issue:
When the PDF is generated the text is displayed across 2 pages like this:
In the above image half the text is on one pdf page and other on second page.
I am not sure whether it is possible or not but how can I change the HTML that it moves the text over to a new page if its going to be displayed across 2 pages. Now the length of the text in the array could be anything.There are no word limitations.
Is this even possible?
The problems you have when a page break confuses your paragraphs are called orphans and widows.
You can define via CSS how many lines are not separated before breaking the page.
Please check out these descriptions:
widows - "The widows property in CSS controls the minimum number of lines of a paragraph that can fall to a new page."
orphans - "The orphan property controls the minimum number of lines of a paragraph that can be left on the old page."
I think, you want to define both properties to have a senseful output.
This question already has answers here:
fixed text in text area using css and js
(2 answers)
Closed 7 years ago.
i wan't to make a textarea that looks like fiverr textarea to create a gig, the text "I wil" is fixed and disabled and i can write just next to it.
i managed to create something similar with css
but i'm stuck on the following issue when the text is written on many lines the first fixed text isn't moved to top with the other lines that the user wrote
i know javascript is the solution but i don't know exactly how , any ideas please ? i'm using angularJS if there is anything specific to angular it's also welcomed. here is my code :
<label class="item item-input" id="questionArea" style="margin-top: -30px;">
<textarea class="text-combien" style="height:100px;padding-right:15px;" ng-model="question.text" placeholder=""> </textarea>
<div class="before-text">Pour Combien,</div>
<div class="ask-text">?</div>
</label>
You can use the text-indent CSS property on the textarea, and then you just need to position a span to go where you've indented the text. Check out this jsFiddle. You will need to tweak the positioning/sizing based on what font you want.
<div id="container">
<textarea placeholder="do something I'm really good at"></textarea>
<span class="textbox-prefix">I will</span>
</div>
<style type="text/css">
.textbox-prefix{
position:absolute;
top:11px;
left:10px;
font-family: monospace;
}
textarea{
text-indent: 50px;
width:300px;
height;200px;
}
</style>
The answer I was looking for is here :
https://jsfiddle.net/ttwbxwon/66/
with the following javascript function binded to onscroll event of the textarea :
function heigthChange() {
var e = document.getElementById("text-combien");
var height = e.scrollTop;
document.getElementById("before-text").style.top = (0 - height) + "px" ;
}
Is it possible to wrap an <a> tag around <div>s like so:
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
Eclipse is telling me the div's are in the wrong place?
If this is not allowed. How can I make the entire 'layout' class become a link?
That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).
Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.
Three options for HTML4 - use all inline elements:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Then style with display: block
Use JavaScript and :hover:
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
And (assuming jQuery)
$('.layout').click(function(){
// Do something
}):
And
.layout:hover {
// Hover effect
}
Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
And CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
This won't work with older versions of IE, of course.
While the <a> tag is not allowed to contain <div> element, it is allowed to contain other inline elements such as <span>.
When I encountered the problem i swapped the div tag with a <span>. Since the span tag is an inline element, you need to apply a display:block to the css of your <span> element, in order to make it behave like the <div> block element.
This should be valid xhtml and does not require any javascript.
Here's an example:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Another simple solution - just add an onclick event handler to the div thusly:
<div class="layout" onclick="location.href='somewhere'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
This works great for me but there is one small gotcha. I'm not sure how search engine friendly this is. I fear that google's web crawlers might not find this link so I also tend to include a traditional A HREF link somewhere in the block like this:
<div class="layout" onclick="location.href='destination_url'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
This is a link
</div>
Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class='div_class'></div>
HTML provides two general elements, where div is a natural block element, and span is a natural inline element. All other elements are similarly assigned to be a natural block or inline.
Now, while both can be made by css display to be any of inline, inline-block or block, they are still treated for enclosure purposes as their natural selves, hence the warning messages. Leopards and spots sort of thing.
However, css is only meant to be for making what an element looks like (presentation), but not actually be like (functionality), so it doesn't change an element's basic nature, though that gets very fuzzy in practice. A span made block becomes a bully that kicks everything else off the line, which is very un-inline sort of behaviour.
So, to mitigate against possible conflicts between their natural and css-induced behaviours, it is better to allow:
div or any natural block tag to only ever be block or inline-block.
span or any natural inline tag to only ever be inline or inline-block.
This will also mitigate against tending to build page structures that will likely end up churning out error and warning messages.
Basically, NEVER embed a natural block tag inside a natural inline tag, at any depth.
Why there is a really a distinction is perhaps due to a simplistic idea of what HTML was going to be used for when it was first dreamed up.
Certainly, framework makers got around a lot of these what-to-embed-where problems by just using myriads of divs everywhere, and 'divitis' was born, and still alive and well in every framework. Just have to press F12 in a browser on almost any commercial web page and drill down through a dozen divs. This very page has 15 unbroken levels of divs.
It is not hard to see why just settling on divs made sense. For example, a p tag may have a bunch of links to various sites, and that is ok because inline links are allowed in a block p. However, if not wanting to have query variables visible in those urls, then buttons are required. If only one, then the p can be put inside a form, as a p cannot contain a form.
The formaction attribute on a button can be used to target a url other than the form default, but it still does not allow independent forms, each with their own set of hidden inputs. A button can use the form attribute to use it with a form that isn't an ancestor, but it can get messy to keep track of.
For multiple links to different sites to appear as part of one paragraph though, the only way is to use a div instead of the p and then wrap each button in its own form set to inline. Most frameworks have to cope with so much more complex scenarios that nested divs are the only way to go.
It meant that they really only had to manage one tag per purpose and manage it as if it was an isolated environment. So what was meant to be an occasionally-used functional grouping tag became the web's Lego block. And none of them are going to risk breaking their frameworks by converting to HTML5 semantic tags in a hurry. In the end, semantic tags only really work for fairly static content rather than rich interactive sites.
I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.
DEMO:
https://jsfiddle.net/kutec/m9vxhcke/
As per W3C standard, you cannot do this:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
You must follow this:
<div class="boxes">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
But by following above code, you wouldn't get the whole DIV clickable :).
Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
Simple Solution:
$(function() {
$('.boxes a').each(function(){
var aTag = $(this).attr('href');
$(this).parent().attr('data-href',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Dynamic Solution:
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find('a');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr('href');
$(this).parent().attr('data-href',this);
aTarget = $(this).attr('target');
$(this).parent().attr('data-target',aTarget);
});
// imitation - default attributes' behavior on "data-" attributes
$(el).delegate('[data-href]','click', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr('data-target');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr('data-href');
el.removeAttr('data-target');
// css
$('[data-href]').css('cursor','pointer');
};
}( jQuery ));
Final call:
<script>
$('.boxes').dataURL();
</script>
Hope this would be helpful :)
You would just want to style the "a" tag as display: block;
Eclipse is appropriately telling you that your HTML is not to spec (as a div tag is not allowed in an anchor tag).
But, since you seem to want to be visually making the anchor look like a big-ol-box, then simply style it as such :)
One easy way to make the div a link/clickable is by using html javascript onclick attribute:
<div class="clickable-div" onclick="location.href='#';"><div> ... </div></div>