Sorry for my poor English.
I have a span (like $) and an input, when user inputs something, the span and input should always stay centered horizontally.
I want it looks like the row 1 in the code below. But in fact I can just code it like row 2.
I want a solution, it will be better to be without js.
I've read about this article(HTML text input field with currency symbol) but it doesn't solve my problem for it doesn't center anything.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
You could just put the $ in the value, and it will move with the value.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<input class="this-should-be-input the-input" value="$12345"/>
</div>
But if you wanted it there permanently you wouldn't be able to center your input field without javascript
Your code is center aligning both the $ sign and the text input. The problem is that you have not specified any width for the input field. You can fix this by specifying the width to the input field.
Hope it helps!
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
width:24%;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
Related
I am trying to design a front-end with HTML and CSS, I am unable to use the div and style them with CSS to have a look like below format.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
display: flex;
align-items:center;
justify-content:space-between;
}
.label-style{
font-weight:600;
font-family:'sans-serif';
font-size:24px;
align-items: center;
color: black;
margin-left:2rem;
line-height:28.8px;
display:flex;
}
.button-style{
border:none;
background:none;
padding:none;
font-weight:400;
size:12px;
line-height:14.4px;
}
.box-design{
width: 100 %;
background-color: gray;
}
.child-one{
width: 50%
min-height"400px;
background-color:white;
float:left;
}
.child-two{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
.child-three{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
<div class="label-style">
<span> student number: 92837293</span>
</div>
<div>
<button class="button-style">
<u> all students</u>
</button>
</div>
</div>
<!-- for the boxes -->
<div class="box-design">
<div class="child-one">
<p> Studnt Name: mike jordan</p>
....
...
...
..
<hr>
<p></p>
</div>
<div class="child-two">
<p> Alerts</p>
</div>
<div class="child-three">
<p> Contact Details</p>
</div>
</div>
</body>
</html>
I am able to display first row student number with a link to all students in the correct format. But as soon as i am trying to write other div elements for boxes and setting min-height. the box is overriding the exiting top and header of the page.
I am quite new to front-end and learning .any help would be greatly appreciated
Expecting how to achieve the Layout which is high-lighted with red box
I have this piece of code:
<div
*ngIf="loginForm.get('username').errors.required"
class="md-margin--s md-margin__horizontal--l">
<i class="icon icon-clear_20 i-class-top"></i>
<span class="md-margin__left--s">Please Enter Username</span>
</div>
This is the result in the UI:
I am not able to place the text at the center vertically.
you should add a class to with below CSS:
.wrapper{
display:flex;
align-items:center;
justify-content:flex-start;
}
There a few HTML elements that I want to put in a line. This is the code I have used.
<input type = "text" className="search" placeholder="Search"></input>
<a href="/">
<img src="logo.svg"></img>
<h3>NameOfTheWebsite</h3>
</a>
SignIn
SignOut
But the output for this code is like this.
I want to put those elements in the same line and the logo should be top of the website name. How do I achieve this?
FlexBox is a really useful thing in such situations. In the following snippet, I have used some flexboxes just to get you familiar with it. But this is something that you should definitely master and use in your CSS layouts. MDN Web docs have a really great tutorial for that.
.home-page{
display:flex;
margin:15px;
}
.controls{
display:flex;
justify-content:space-between;
align-items:center;
}
.signing-buttons{
display:flex;
}
.signing-buttons a{
margin:5px;
padding:10px;
border:2px solid red;
border-radius:4px;
}
<a class="home-page" href="/">
<h3>NameOfTheWebsite</h3>
<img src="logo.svg"></img>
</a>
<div class="controls">
<input type = "text" className="search" placeholder="Search"></input>
<div class="signing-buttons">
SignIn
SignOut
</div>
</div>
You can use flexbox to achieve this. Just a minimalistic example to illustrate my point is shown below. You can control how much space each item will occupy and a lot of other things.
.row {
display:flex;
}
.search {
flex:1;
border:1px solid black
}
.name {
flex:1;
border:1px solid black
}
<div class='row'>
<div class='search'>Search Box</div>
<div class = 'name'>Name</div>
</div>
<div class='row'>Next line</>
Example (with "OR" as text):
The idea is that on collapse of columns—i.e.: view on mobile sized-screen—it will appear betwixt submit and Click me.
How do I add some text onto the divider between rows?
Why don't you use a .span between your two forms ?
<div class="container">
<div class="row">
<div class="span5">
form 1
</div>
<div class="span2">OR</div>
<div class="span5">
form 2
</div>
</div>
</div>
Demo (jsfiddle)
<style>
.wrapper{
width:900px;
margin:0 auto;}
.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;}
.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}
.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>
<body>
<div class="wrapper">
<div class="left">SUBMIT CONTENT HERE</div>
<div class="mid">OR</div>
<div class="right">CLICK ME CONTENT HERE</div>
</div>
I think this can help you. now you can style it if you want to add vertical bar on mid you can add that bar as a background image
then you can style it or add any DIV tags to it Its your wish.. ;)
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/