See image for reference
I want to know if it is possible to fix a text in the end of an input field.
I'm doing a money converter and the user have to type the value in Euro(for an example) and the other input is supposed to return the value in USD, and in the end of the input has to have the name of the currency.
I'm only interested in know the HTML part of the fixed text in the input.
I'm using React and Chakra UI.
The way I would do it is add the text after the input, add a position: relative; on the Text you want to include inside the input and then adjust how further to the left or right the text is, using left or right. In this case I used left: -50px;. Run the snippet and see if it's how you want it to be.
div{
display: flex;
}
p{
position: relative;
left:-50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<input placeholder="Placeholder"><p>Text</p>
</div>
</body>
</html>
If you wrap the input in another element, a label seems appropriate, then you can add a pseudo element to that and position the content using a translate.
In this snippet a small extra amount is added to the translate to give the effect of a bit of padding, so the USD isn't right up against the end of the input.
label::after {
content: 'USD';
display: inline-block;
transform: translateX(calc(-100% - 5px));
}
<label><input/></label>
Related
so Iv'e made an input that it's height is "300px" what means that its pretty big, and when I type a text the input it's starts from the middle of the input and not from the left top. How do I do it?
text-align: left;
height: 300px;
You could use padding instead of height.
Something along the lines of this would suffice:
input{
padding-bottom: 280px; /* change this depending on your requirements */
}
Although I don't recommended this. It's very tacky and un-user friendly. As the comments suggested, you should have a look into HTML's native textarea element.
This may not be what you were looking for but consider it.
var textarea = document.getElementById("demo");
function getValue() {
alert(textarea.value); // Works just like a text input!!!
}
#demo {
height: 300px;
resize: horizontal;
/* Considering you have defined a height */
}
<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="path/to-your/css-file.css">
-->
</head>
<body>
<textarea id="demo">And yes you can get the value of a textarea just like a text input!</textarea>
<button onclick="getValue()">Get Value</button>
</body>
</html>
I have a textarea and a button. I wanted them to be placed in a same horizontal line from the bottom.But when I place them inline with no style applied It is displayed like this:
I am just unable to understand what is causing them to happen so?
Where is the extra margin coming from at the bottom of the text area?
And When I am doing the same thing with the form input they are okay as in the image 2:
So what is causing textarea to behave like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
textarea,button
{
margin:0;
}
</style>
</head>
<body>
<div>
<textarea>textarea</textarea>
<button>Button</button>
</div>
</body>
</html>
Add vertical-align: bottom; to your style:
<style type="text/css">
textarea,button
{
vertical-align: bottom;
}
</style>
The issue is that setting them to inline elements messes with their vertical-alignment. The style will fix this issue.
I am currently using WKHTMLTOPDF to generate PDFs through my Laravel application. The PDF template uses Bootstrap 3.3.6.
What I'm currently seeing is that the text, font, layout renders perfectly, but text is cut off from the left-margin.
If I remove the call for the Bootstrap CSS, it doesn't cut off the text, but the tables etc.. aren't aligned/laid out correctly. It must be something in Bootstrap that's causing this issue.
Top of template
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
width: auto !important; min-width: 100% !important;
font-family: 'Lato';
}
.page-break {
page-break-after: always;
}
</style>
The line width: auto !important; min-width: 100% !important; makes more of the text visible, but it's still not perfect (see screenshot below on the second page):
Any text wrapped in<p> </p> fits on the PDF correctly, but the headers and tables etc.. are cut off on the left hand side.
Controller code:
$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');
Has anyone experienced this before? If so, how did you resolve it? If you require further code samples, please let me know. Many thanks.
I have experienced this before, on Frappé Framweork and ERPNext. The HTML rendering for a DocType (Sales Invoice) will do this for mysterious reasons. So far I have found two workarounds:
1. Set the viewport size in the HTML code as per your final document size. For example, an 8.5 x 11 Letter sized page would be:
<style>
#media screen {
.print-format {
width: 21.59cm;
min-height: 27.94cm;
padding: 0.0cm;
}
}
</style>
I think you can use inches or other accepted measurements as well. You must declare an adequate viewport size on the HTML or Jinja template by doing the above solution
If all else fails, I solved my problem alternatively with the following styles and HTML:
<style>
div.general{
position: relative;
top: 0.0cm;
/*left: 0.0cm; */
}
div.document_size{
position: absolute;
width: 21.59cm;
height: 27.94cm;
}
</style>
<div class="general">
<div class="document_size">
<!-- YOUR HTML GOES HERE -->
</div>
</div>
Finally, to carefully position your elements on the page, use the span tag, with a declared class style, so you can place it in absolute terms within the divs created above. Distances are measured from the top left (origin) of the document:
span.item1{
position: absolute;
top: 1cm;
left: 1cm;
}
Once you have placed the span class= "item1" within the div tags as above, you can place anything you want within them. I consider these span tags as a sort of coordinate system marker, that ensures consistent output on every generation of wkhtmltopdf.
I have following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:before pseudo-class and images</title>
<style type="text/css" media="screen">
img {
display: block;
width: 640pt;
}
img:before {
content: "Test";
}
</style>
</head>
<body>
<img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" />
</body>
</html>
:before will not appear for image, but it does for any div.
Why?
Update:
I found this explanation in W3C:
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Update 2:
I forget to mention - i need to visualize "alt" attribute of image with CSS.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
Considering the specification you quoted, I guess this is a case where you have to wrap the image in an element and apply :before on that.
EDIT:
Considering, that the alt attribute is for alternative text and basically should confer the same information as the image does, wouldn't that mean you are duplicating the information for the user?
How about putting the information you want to display in the title attribute of the surrounding element and displaying that?
Example:
<style type="text/css" media="screen">
.image:before {
content: attr(title);
}
.image img {
display: block;
width: 640pt;
}
</style>
<div class="image" title="Information here"><img ... ></div>
Wondering if this is possible:
Let's say if I have a text input element that I want to use to input currencies. Probably I'd want a prefix before the text input to indicate what currency the user is performing his input in.
Hence, the HTML'd look something like:
US$ <input type="text" />
But let's say I want the "US$" above to appear as a prefix inside the text input itself, without the "US$" being part of the input string. Something like where "US$" is the background text of the text input. Of course, the text input would be indented to avoid clashing with the background text.
Any way of accomplishing this without the use of images or Javascript?
Thanks!
I didn't have time to try my solution in IE (leaving work now) but you can play around with this if you want: http://pastie.org/581472
Update: Took a quick look in IE6-8 and it didn't work in any of them. Not sure if it's cause of the minimal HTML5 document or something else, I'll take another look at it later today or tomorrow.
Update 2: Updated the code to work with FF 3.5, Opera 9, Safari 4, IE6-8 (and probably more and earlier versions, but that is not tested). Grab the updated code.
<!doctype html>
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
Updated code:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>
If you really wanted to, you could do the following:
1.) Start with a field being defined as follows:
<div class="moneyFieldHolder">
<input type="text" class="moneyField" />
</div>
2.) Create a background image of a textbox with US$ inside it:
----------------
|US$ |
----------------
3.) set up the CSS:
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
And that's it...this is definitely a hacky solution and should only really be used if absolutely necessary. Also, this does -- of course -- require an image.
i would think you could do this with an absolutely positioned div that has a transparent bg. alternatively, you might have some success intercepting every keystroke and updating what is displayed yourself.