Probably thi is a simple question. But I'm new with css and javascript.
I have a button below the textarea and I want the button to move along with the textarea when I extend it!
How can I do this?
To align button to textarea corner and keep it in same relative position while expand contract, try the following :
First of all, the HTML code :
<form>
<textarea></textarea>
<p>
<input type="reset"/>
<input type="submit" value="Submit"/>
</p>
</form>
Then, add css property :
form {
position: relative;
display: inline-block;
}
form textarea {
min-width: 140px;
}
form p {
margin: 0;
padding: 0;
display: block;
text-align: right;
}
Finally, here is the JsFiddle.
Enjoy your day!
Related
I am currently trying to make a simple form. As an example, this is what I'm trying to get it to look like.
This is the current architecture for each field:
<p>
<label>First Name</label>
<input></input>
</p>
I struggle once I get to the CSS part. Here's a full example, and any help would be greatly appreciated
div {
text-align: center;
}
form p {
display: inline-block;
}
form label {
text-align: left;
display: block;
}
<div>
<form>
<p><label>Name:</label> <input type="text"></p>
<p><label>Password:</label> <input type="text"></p>
</form>
</div>
I just cannot figure out how to get a line break after the input with the current CSS.
can use float instead of inline-block
form {
max-width: max-content;
margin: auto;
}
form p {
float: left;
clear: left;
}
I have an input field, and inside it on the right side there is a string that displays information to the user.
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
Using position relative and absolute, I places the span inside the input field.
However, if the user types a long query, the text will be under the span text.
Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?
You can add some padding-right to the input box.
.my_div_class {
position: relative;
width: 200px;
}
.my_input_class {
width: 100%;
padding-right: 100px;
box-sizing: border-box;
}
.my_span_class {
position: absolute;
right: 0;
top: 0;
}
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
.my_input_class {
padding-right: 1em; // Replace `1em` with the desired amount of padding
}
I'm trying to make a custom file selection button in HTML and CSS.
I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:
HTML:
<div class="upload">
<input type="file" class="upload" name="upload"/>
</div>
CSS:
div.upload {
width: 157px;
height: 57px;
background-color: silver;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}
And it's working, obviously... but I want only a text, not a image.
So I tried it like this way:
<div class="upload">
Choose File
<input type="file" class="upload" name="upload"/>
</div>
And it won't work when I click on the label. It only works when I click below it.
Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...
You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.
<div class="upload">
<label class="uploadLabel" for="uploadBtn"> Choose File</label>
<input id="uploadBtn" type="file" class="upload" name="upload" />
</div>
In order to completely cover the button with your label, you'll also have to add absolute positioning.
.uploadLabel {
position: absolute;
}
Demo
Why is this necessary?
The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.
use an actual label element. that will take care of delegating the click from the container to the input.
set opacity to 0, as you did in your original post (another, more verbose, and arguably more semantic approach will be to position the input absolutely and the label relatively, and set a lower z-index to the input. that will cover the input completely, effectively hiding it — see the second example).
the benefit here is you get clickable area that matches the label surface only, so you can style and set the dimensions to the label alone.
.upload {
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
opacity: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
… and the more verbose approach:
.upload {
position: relative;
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
I have an input of type button that is used to validate a form an input of type text.
I have seen that, for example, bootstrap lets you append some values to input. I am wondering how would I do append this input of type button into my input of type text.
I have added a screenshot of how I am thinking of it to be, but I am not sure which CSS strategy I would choose.
Thanks
It is nothing but a submit button with a text field
Demo
HTML
<div class="wrap">
<input type="text" />
<input type="button" value="Demo" />
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
input[type=text] {
padding: 10px;
width: 300px;
padding-right: 60px;
}
input[type=button] {
padding: 2px;
position: absolute;
right: 5px;
top: 5px;
}
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.