On UIKit, How do you create an email form with an inline text so the user can input text and the form has #example.com after it.
You can do this in bootstrap here: https://getbootstrap.com/docs/4.0/components/input-group/
But I am unable to recreate this on UiKit?
Just "borrow" the concept from bootstrap. Wrap the elements within grid, group them with the class name, and inside the group add element with the flexbox display, it will fit automatically. From what I've seen in sources - they give him 1% width - maybe there's a case for that, but anyway works with only display:flex.
Here's my proposition:
HTML
<form class="uk-grid-small" uk-grid>
<div class="uk-width-1-2#s input-group">
<input class="uk-input" type="text" placeholder="50">
<div class="input-group-append">
<div class="input-group-text">
#email
</div>
</div>
</div>
</form>
CSS
.input-group {
display: flex;
}
.input-group-append {
display:flex;
align-items:center;
}
.input-group-text {
display: flex;
align-items: center;
font-weight: 400;
height:38px;
color: #495057;
padding: 0 10px 0;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-left:none;
}
I've also made a codepen for the reference https://codepen.io/arysom/pen/QzGjyo
Related
I just got into react-bootstrap today. I want the form to be in a div with margins on left and right side. My jsx looks like this:
const Settings = () =>{
return(
<div className="content">
<div className="box">
{/* Actual form with course info */}
<Form className="course-info">
<Form.Group as={Row} controlId="formHorizontalEmail">
<Form.Label variant="settingsLabel" column sm={3}>
Course Title
</Form.Label>
<Col sm={5}>
<Form.Control/>
</Col>
</Form.Group>
</Form>
</div>
</div>
);
}
CSS:
/* A big wrapper for everything on this page */
.content{
display: flex;
align-items: center;
justify-content: center;
}
/* The box containing the class settings */
.box {
width: 600px;
height: 600px;
border: 30px solid #A6D1DF;
margin-top:50px;
}
.center-items{
margin-top: 1em;
text-align: center;
}
/* Gives the form left/right margin and sets text color */
.course-info {
padding-left: 20px;
color: #9E7772;
}
Form.Label-settingsLabel {
font-size: 1em;
color: red;
}
And the form content overflows the right-hand side of the box, and removing the margin fixes the problem.
However, I still want that margin for styling purposes. Any suggestions? Thanks
I have my <mat-card> that has one form for the login of my page, the problem is when the error messages are displayed they change the size of the <mat-card> vertically and i need it to stay in the same size.
How can i do that?
Below i will let my html file , the sass file of the error messages and pictures of what I have
html file
<div class="bg">
<div class="main-div color ">
<mat-card class="z-depth center col-sm-4 " flex="50" >
<mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
<mat-radio-button [value]="true" >User</mat-radio-button>
<mat-radio-button [value]="false">Admin</mat-radio-button>
</mat-radio-group>
<div class="row justify-content-center " *ngIf="radio_btn==true;else form2">
<form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendUser()">
<mat-form-field class="example-full-width ">
<input matInput formControlName="Identifier" placeholder="Identifier" >
</mat-form-field><br>
<div class=" alert-danger space" *ngIf="identifier.invalid && (identifier.dirty || identifier.touched)">
<div class="container-error-message " *ngIf="identifier.errors.required">
Identifier required
</div>
<div class="container-error-message" *ngIf="identifier.errors.minlength">
Identifier must be at least 7 characters long.
</div>
</div>
<br>
<mat-form-field class="example-full-width">
<input matInput formControlName="Password" placeholder="Password" type="password" >
</mat-form-field><br>
<div class="alert-danger space" *ngIf="password.invalid && (password.dirty || password.touched)">
<div class="container-error-message" *ngIf="password.errors.required">
Password required
</div>
<div class="container-error-message" *ngIf="password.errors.minlength">
Password must be at least 5 characters long.
</div>
</div>
<br>
<button mat-raised-button [class.black]="!loginForm.invalid" [disabled]="loginForm.invalid" type="submit">Sign in</button>
</form>
</div>
<ng-template #form2>
<app-home-admin></app-home-admin>
</ng-template>
</mat-card>
</div>
</div>
SASS file
#import './../../variables_scss/variables.scss';
example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.down{
overflow-y: auto;
.colour{
//background: #141519;
background: $orange-bg;
.icons {
color: $black;
}
}
}
.container{
align-items: center;
}
.main-div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.center{
width: 75%;
margin: 10px auto;
.mat-radio-button ~ .mat-radio-button {
margin-left: 16px;
}
button {
display: block;
width: 100%;
margin: 2px;
text-align: center;
color: $orange !important;
border-radius: 8px;
}
}
}
.bg{
background: $black;
background: linear-gradient(to right, $dark_black,$light_black );
}
.behind{
z-index: 10;
}
.black {
background-color:$black !important;
}
.space{
margin: $margin-errors;
text-align: $text-align-center;
width: $width-erros;
border: 1px solid;
}
* scss_variables*
$dark_black: #1b1b1b;
$light_black: #424242;
$black: #141519;
$margin-left: auto;
$orange: #fc6407;
$colour_button :$black;
$orange-bg: linear-gradient(to right, #c43e00, #ff6f00);
$margin-errors: 0 auto;
$text-align-center: center;
$width-erros: 180px;
I am not able to replicate your issue with the code given by you. But i would suggest you to provide a constant height to mat-card which is sufficient to enclose all the items. Like i am taking 400px below:
mat-card {
height: 400px;
}
This is how i solve it
Adding this to the space class
max-height: 0px ;
margin-top: 0px !important;
Adding this to the center class
height: 290px;
You can add maximum height and minimum hight of card as same like this in your CSS file , it's worked for me, if you done like this then if the content size is height,automatically scroll will be apply without any size correction
.mat-card{
min-height: 230px ;
max-height: 230px ;
}
Having this:
<label>
<button>Create</button>
</label>
I want button to be aligned to the right like this
----------------------------
| [create]|
----------------------------
while having this:
<label>
<button>Delete</button>
<button>Update</button>
</label>
I want buttons to be in the corners
----------------------------
|[delete] [update]|
----------------------------
Without adding additional classes to the label.
You can just use margin-left: auto on last-child and that will produce desired result.
label {
display: flex;
border-bottom: 1px solid #aaa;
margin: 20px 0;
}
label button:last-child {
margin-left: auto;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can do this using nothing but standard flexbox properties:
flex-direction: row-reverse - put the items in a row, start from "the end" (depends on reading direction)
justify-content: space-between - put the items as far away from each other as possible
label {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can use CSS Flexbox justify-content property to align your elements.
Have a look at this Codepen.
Or look at the code below for reference, also I've used <div>s in place of <label> as in the .two they are acting on both the buttons.
div {
display: flex;
background: #ddd;
padding: 10px 20px;
margin-bottom: 10px;
}
div:first-child {
justify-content: flex-end;
}
div:nth-child(2) {
justify-content: space-between;
}
<div>
<button>Create</button>
</div>
<div>
<button>Delete</button>
<button>Update</button>
</div>
Learn more about CSS Flexbox
Hope this helps!
I'm using twitter bootstrap for my css and the following code has an issue with the alignment:
see jsfiddle here: http://jsfiddle.net/graphicsxp/99rhF/ (make sure you enlarge the html view)
<div class="view-header">
<span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right">
</div>
<div class="clearfix"></div>
</div>
as you can see the button with the label 'Rechercher' is too far right. What am I doing wrong ?
There is nothing wrong with your button, its the containing element.
Update the css with:
.view-header {
background-color: #F5F5F5;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 20px;
padding: 10px 20px;
}
Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem.
See:
http://jsfiddle.net/99rhF/2/
The parent element has a width of 100%, but padding isn't included in width calculations, so it ends up being 100% + 40px. You fix this by wrapping the contents in a container, and padding that instead.
http://jsfiddle.net/ndTuL/
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #bbbbbb;
}
.content-wrap {
padding: 10px 20px 10px 20px;
}
First of all, I know I'm late to the party :)
Second - #Jamie Hutber has a very good and valid answer. No arguments here at all - it should remain the accepted answer for sure.
Third - Here's what I ran in to, and how I fixed it:
HTML:
<!DOCTYPE html>
<html>
<head>
<?php echo $str->head; ?>
</head>
<body>
<footer>
© Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
</footer>
</body>
</html>
<footer> is also a Block Line Element, so width is not needed. Here's what I did instead:
CSS
body {
background-color: #f8f3ed;
max-width: 1200px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
footer {
display: flex;
flex-direction: row;
height: 1.5rem;
font-size: 1rem;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
max-width: 1200px;
padding: 5px;
}
Things to note is that the position: absolute; will mess up any text-direction and make it overflow, especially if you try and add a width: 100% to it. The right and bottom stick it on the bottom right corner no matter how much you scroll.
It's not exactly what the question was asking, but I thought it might be nice for people to see some alternate ways to have this issue, and resolve it.
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form