Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.
Related
I need to create a website and I would like to increase the size of the buttons because it looks really really bad.
I'm not allowed to use any form of CSS or JavaScript for this project and the solutions I found so far all use CSS.
I've tried inserting the buttons into a table but that didn't do anything to help me and all the solutions I found on the internet either don't work or use CSS
You can use header elements like <h1>, <h2> etc. Semantically it may not be very 'clean' to use in this way (you are not creating headers as one would do in e.g. a publication), but I'm afraid there's not much else.
<button>Standard size</button><br />
<br />
<button><h1>Using h1</h1></button>
<button><h2>Using h2</h2></button>
<button><h3>Using h3</h3></button>
<button><h4>Using h4</h4></button>
I am looking for a way to format a section of my page so users can easily copy a small block of text while on a mobile device.
Are there any classes in Bootstrap, some HTML, or a way to format my CSS to make this easier. I know browsers except IE don't like javascript copying text to the clipboard.
Since your question is specific to HTML & CSS for mobile, here are some thoughts.
I find that having large hit areas available on the elements you want the user to interact can help to start with. E.g. paddings on <p>s for example. So when a user starts tap-holding to initiate text selection, it'll more likely fall on the hit area of the paragraph. (A nifty trick is replacing margins with paddings!)
Try to make sure your content that is selectable follow a natural content flow box model. No weird floats or absolutely positioned content or otherwise content that might confuse the selection widget. Make it as document-like as possible!
Read up on the ways that you can control selection, e.g. user-select CSS property - https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
You might want to disable text selection on elements that don't make sense, to help make text selection cleaner on the parts that matter.
Large font sizes are obvious, but maybe not so obvious is very large line-heights is fantastic for making text-selection a little less awkward! It can improve readability greatly on the side as well, my favourite for body text is line-height: 1.6;.
If you use viewport meta tag, make sure they can zoom in to fill the text/paragraph edge-to-edge comfortably when they want to. This can help a lot to get up close, to do the text selection and get tactile with your content.
However, if you do want to try JS, then I would recommend clipboard.js: https://clipboardjs.com/
Think also about what your users want to copy ahead of time, you might be able to do some analytics and allow users to highlight common text. This is done on Medium by the way to lead as a good example.
You could make it so that when they click on the element, all the text is selected automatically, so all they had to do, assuming they're using a modern mobile device, is long-tap and press copy to clipboard.
document.getElementById("TextParent").onclick(function(){
fnSelect("TextParent");
});
So your html would look something like the following:
<div id="TextParent">
Click anywhere in this div to select this text!
</div>
Adding to this, Nexii Malthus has a good point in regards to the hit areas on mobile phones, so maybe try to add some extra padding to the div.
You should definitely try https://clipboardjs.com/.
<!-- Target -->
<div id="bar">Mussum ipsum cacilds...</div>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Copy to clipboard
</button>
and activate it using following javascript new Clipboard('.btn')
Look created sample https://jsfiddle.net/gevorgha/fbeof421/
Note
There are some compatibility issues with iOS devices that do not copy target on trigger action, but it selects target and allows user to copy it manually.
In general I like the pretty option. I like my html to be readable and pretty helps. But there are times when it gets in the way. For example.
x.do-not-care-about-spaces It can go either way here.
y.please-no-spaces These
y.please-no-spaces Should
y.please-no-spaces Touch
What I'd like to see is:
<x class="do-not-care-about-spaces">It can go either way here.</x>
<y class="please-no-spaces">These</y><y class="please-no-spaces">Should</y><y class="please-no-spaces">Touch</y>
But what I do see is
<x class="do-not-care-about-spaces">It can go either way here.</x>
<y class="please-no-spaces">These</y>
<y class="please-no-spaces">Should</y>
<y class="please-no-spaces">Touch</y>
I know there are several ways to work around this (with css, by putting html in the jade file), but what I'm hoping for is a jade-y way of doing it.
EDIT: Updated example with example tags, rather than divs. I am asking specifically about controlling spaces between DOM nodes in jade's HTML output, not the visual space between elements on a rendered web page.
There is a similar question on the github repo and the essential comment is:
No, it is not currently possible to force only part of the document into pretty/normal mode. The general recommendation for this is to use the normal (non-pretty) mode which is the default for exactly this reason. You can explicitly add white space using = ' ' (on its own line) when actually needed for the formatting of the page.
A <div> element takes up the whole row, so it makes sense that it's rendered as such too.
I think what you need are <span> tags
span.no-space These
span.no-space Will
span.no-space Touch
<span class="no-space">These</span><span class="no-space">Will</span><span class="no-space">Touch</span>
BTW there's also the inline #[…] syntax which makes more sense if you're putting tags in one line
#[span.no-space These]#[span.no-space Will]#[span.no-space Touch]
Note that this syntax will not however make divs appear in one line though, you still have to use spans.
I've got a <textarea>, but I need to color specific lines different colors. Apparently, I can't do this.
I could perhaps use a <div>, but I like the look and scrollbar of a <textarea>.
Is there any sort of database of HTML elements somewhere that I can check? It's rather annoying having to burden the posters of StackOverflow whenever I can't place the name of an element.
Textareas can only contain plain text. No possibility to format via CSS. You need something like a WYSIWYG Editor (CKEditor or TinyMCE)
Or if readonly, filled by javascript:
Use a simple div which can contain HTML markup inside for your line colors. Then style it with CSS to look like a textarea (scrollbar maybe)
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.