I'm looking to create the desired styling in the photo shown. Having trouble getting the custom SVGs I created to be inline with the text field. How would I go about creating this effect?
Here's a snippet of the code I'm using at the minute, where am I going wrong?
I'm mostly using the JQM library if that is of any help.
<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
<img src="img/icon/regicons/usernumber.svg">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Ensure that the <input/> has the same height as your <image/> and position it at top of it's parent element.
height: 32px; box-sizing: border-box;
absolute; top: 0;
Snippet:
input {
height: 32px;
box-sizing: border-box;
position: absolute;
top: 0;
}
.box2 {
display: inline-block;
position:relative;
width: 40vw;
}
<div class="box2" style="">
<img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
<input type="text" name="userNo" id="userNo" placeholder="Number" required>
</div>
I would use a flexbox, which is responsive by nature.
.box2 {
display: flex;
background-color: lightgrey;
align-items: center; /* Vertical alignment */
}
<div class="box2" style="position:relative; width: 40vw;">
<img src="https://via.placeholder.com/50x50/00ff00">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Related
I'd like to add an icon right before the placeholder in a textarea but don't know how to do it.
Here is my code:
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text"
placeholder="">
</textarea>
</div>
</div>
Thank you.
It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome.
You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:
HTML (added span in your code):
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text" placeholder=" Icon before this"></textarea>
<span class="icon"></span>
</div>
</div>
CSS:
.center-part {
position: relative;
min-height: 50px;
min-width: 200px;
}
.share {
min-height: 50px;
min-width: 200px;
}
.icon {
position: absolute;
background: red;
width: 15px;
height: 15px;
left: 10px;
top: 5px;
}
You can see a demo at Codepen
Im trying to get my two images displayed right next to each other. Currently they keep going under each other. I have searched for some help, but all of it keeps the images the same. I hope some of you can understand the html and css and help me out with this one.
The images are inside each of they own form, and both images has gotten some styling so they have a hover effect.
.container {
position: relative;
width: 400px;
height: 400px;
display: inline-block;
}
.image {
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
transition: all .3s ease;
opacity: 0;
background-color: #eee;
pointer-events: none;
}
.container:hover .overlay{
opacity: 1;
}
.text {
color: white;
font-family: sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #39598cab;
}
.container:hover .overlayFade{
width: 100%;
}
<center>
<form action="FrontController" method="post">
<h2>Vælg hvilken tag type du ønsker</h2>
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Spidst tag</h1>
Quick-byg carport med spidst tag
</div>
</div>
<input type="hidden" name="command" value="PointedRoof">
<input type="image" src="./IMAGES/spidsTag.jpg" class="image" value="Spidst Tag">
</div>
</form></center>
<center>
<form action="FrontController" method="post">
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Fladt tag</h1>
Quick-byg carport med fladt tag
</div>
</div>
<input type="hidden" name="command" value="FlatRoof">
<input type="image" src="./IMAGES/fladtTag.png" class="image" value="Fladt tag">
</div>
</form>
</center>
Images are showing under each other because of the block property.
as Center tag has block property by default.
just add given below css in your stylesheet
center{display: inline-block;}
The best way to do is to use display :flex; and align-items:center to the parent.If you want to align both childs at both ends ,just use justify content :space-between
if you want to learn more about flex visit this link
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm new to world of forms! I had made divs and css for the exact layout I want for the forms. Is there anyway to maybe just turn that div tag into button or a text field while still using the same css rules so the layout doesn't change?
Here is some code and demo to just check what I have going on.
HTML
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<div id="loginUsername"></div>
<div id="loginPassword"></div>
<div id="loginSubmit"></div>
</div>
<div id="registerForm">
<div id="register"></div>
<div id="registerName"></div>
<div id="registerEmail"></div>
<div id="registerPassword"></div>
<div id="registerPasswordConfirm"></div>
<div id="registerSubmit"></div>
</div>
</div>
CSS
#loginContainer {
width: 50%;
height: 50%;
position: absolute;
left: 21.8%;
top: 40%;
z-index:-9999;
}
#loginForm {
width:47.5%;
height: 100%;
float:left;
top: 0%;
position:relative;
}
#login {
width: 100%;
height: 10%;
top: 0;
background-image:url(../_images/_login/login.png);
background-size: 100% 100%;
position: absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#loginUsername {
width: 100%;
height: 10%;
top: 15%;
background-color: #383d3f;
position: absolute;
border-radius: 5px;
}
#loginPassword {
width: 100%;
height: 10%;
top:30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#loginSubmit {
width: 100%;
height: 10%;
top: 45%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
#registerForm {
width:47.5%;
height: 100%;
float:right;
top: 0%;
position:relative;
}
#register {
width: 100%;
height: 10%;
top:0%;
background-image:url(../_images/_register/register.png);
background-size: 100% 100%;
position:absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#registerName {
width: 100%;
height: 10%;
top:15%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerEmail {
width: 100%;
height: 10%;
top: 30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPassword {
width: 100%;
height: 10%;
top: 45%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPasswordConfirm {
width: 100%;
height: 10%;
top: 60%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerSubmit {
width: 100%;
height: 10%;
top: 75%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
CLICK FOR DEMO
Sure you can, just replace the right elements with input with proper markup, add an opening and closing form tag, remove the borders, and you're good to go:
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<form method="post" name="loginForm">
<input id="loginUsername" type="text" name="loginUsername" />
<input id="loginPassword" type="text" name="loginPassword" />
<input id="loginSubmit" type="submit" name="loginSubmit" value="" />
</form>
</div>
<div id="registerForm">
<div id="register"></div>
<form method="post" name="loginForm">
<input id="registerName" type="text" name="registerName" />
<input id="registerEmail" type="text" name="registerEmail" />
<input id="registerPassword" type="text" name="registerPassword" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" />
<input id="registerSubmit" type="submit" name="registerSubmit" value="" />
</form>
</div>
</div>
#loginContainer input {
border:0
}
Here is your updated demo: http://jsfiddle.net/7w1adgko/2/
EDIT: Note that you may want to fill out the value property of the submit buttons so that users will actually know it's the submit button.
<input id="loginSubmit" type="submit" name="loginSubmit" value="Login" />
or...
<input id="registerSubmit" type="submit" name="registerSubmit" value="Register" />
Also, in order users to know what field is what, you may want to use the placeholder property.
<input id="loginUsername" type="text" name="loginUsername" placeholder="Username" />
<input id="loginPassword" type="text" name="loginPassword" placeholder="Password" />
or...
<input id="registerName" type="text" name="registerName" placeholder="Name" />
<input id="registerEmail" type="text" name="registerEmail" placeholder="Email" />
<input id="registerPassword" type="text" name="registerPassword" placeholder="Password" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" placeholder="Confirm Password" />
And to make it prettier, you could add some colour and padding to the inputs.
#loginContainer input {
border:0;
padding: 0 10px;
color:white
}
Here is your most recent fiddle with these changes: http://jsfiddle.net/7w1adgko/3/
EDIT 2: To make all the boxes have the same width, you could specify the same box model for type="text" and type="submit" inputs (source: CSS: Submit button looks smaller than text input and textarea)
#loginContainer input {
border:0;
padding: 0 10px;
color:white;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Here is the updated fiddle: http://jsfiddle.net/7w1adgko/4/
It would be better to start from the proper functional markup and then consider styling. For the functionality of a form, you need elements like input to set up the controls, label to have labels (captions) associated with controls, and form to contain the entire form. (And you probably should not have two forms side by side, it can be confusing.)
However, if you have designed a layout in a “DIVistic” way and you wish to turn it to a functional form element with working controls, you need to take into account that form-related elements have default rendering that you may need to override. A form element has top and bottom margin by default, label elements are inline elements (display: inline) as opposite to div elements that are blocks (display: block), and input elements are inline blocks that have borders and padding.
On the other hand, most (if not all) of your div elements are just containers, instead of being direct counterparts to controls. For example, the element <div id="loginUsername"></div> really needs some content, such as
<div id="loginUsername"><label for="uname">User name:</label>
<input id="uname" name="uname" required size="8" maxlength="8"></div>
Assuming that the content fits inside the div element as formatted in your current design, no change in the layout styling is then needed. (However, from the jsfiddle, it seems that you intend to use form controls without any labels. This would be a major usability and accessibility problem, and fixing it probably requires a redesign of the layout.)
http://liveweave.com/73vub5
So I got the objects to display the way I want as seen in the image, but my problem now is when I choose the second object the first should become unchecked and choose the second one. Using regular input boxed just inside a form it does it automatically without the need for JavaScript. Anyway to fix this that'll same me tons of time coding so I don't have to define it in Javascript/JQuery each time an object has been selected/checked and deselected/unchecked.
<style type="text/css">
div#container div {
display:inline-block;
margin:1.25%;}
div#circle {
width:40px;
height:40px;
border:1px dashed #000;
border-radius:50%;}
div#square {
width:40px;
height:40px;
border:1px dashed #000;}
</style>
<div id="container" align="center">
<form>
<div id="square"><br><br>
<input type="radio" name="squareselec" checked="true"></div>
<div id="circle"><br><br>
<input type="radio" name="circleselec"></div>
</form>
</div>
To center the input element, you'll need to make the radio display: inline-block; - and it's container text-align: center;
I sugest staying away from id's unless using them for javaScript hooks or very special reasons. HERE is a jsfiddle with the code for you to play with. I hope this helps. -nouveau
HTML
<div class="object-wrapper">
<img alt="image name" src="http://placehold.it/50x50" />
<input type="radio" name="squareselec" />
</div>
<div class="object-wrapper">
<img alt="image name" class="circle" src="http://placehold.it/50x50" />
<input type="radio" name="squareselec" />
</div>
CSS
.object-wrapper {
width: 3em; /* arbitrary */
text-align: center;
/* to explain visually */
border: 1px solid red;
padding: .1em;
/* to grid them */
float: left;
margin-right: .5em;
}
.object-wrapper img {
display: inline-block;
width: 100%;
height: auto;
}
.object-wrapper input[type="radio"] {
display: inline-block;
}
.circle { /* to make a circle */
-webkit-border-radius: 100%;
border-radius: 100%;
}
I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:
Label 1 <input />
sub text for label 1
The code I currently have is as follows:
<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>
CSS:
form { width: 100%; overflow: hidden; margin-top: -20px;}
form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }
form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}
There are a few rows that need to be formatted like this. Thank you for any help you can provide.
<div class="row">
<label for="height">Height <br /><span>(help text here)</span></label>
<input name="height" id="height" ... />
</div>
label {
display: block;
float: left;
}
make the label a block element so you can put a br. not a good solution also but it works :P
Try this :
<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>
It may be a workaround to your issue, but not a perfect solution
How about:
<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>
And CSS:
.row label {
display: inline-block;
width: 40%;
}
.row input {
display: inline-block;
width: 50%;
margin: 0 0 0 5%;
}
.row label.help {
display: block;
}
JS Fiddle demo.