I'm using Vuetify and i've created a row with three columns, but for the love of me i can't properly align the icons above the input fields, like the screenshot below the code.
The icons behave like block elements and are placed next to the input fields, rather then above.
Here's an image of what i've achieved so far:
Can someone help me out, or atleast point me in the right direction? Thanks in advance!
<v-row>
<v-col cols="4">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
<span>:</span>
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</v-col>
<v-row>
You can align this using flex classes.
<v-col cols="4">
<div class="d-flex flex-row align-center">
<div class="d-flex flex-column align-center">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</div>
<span class="mx-2">:</span>
<div class="d-flex flex-column align-center">
<v-icon>arrow_drop_up</v-icon>
<input type="text" />
<v-icon>arrow_drop_down</v-icon>
</div>
</div>
</v-col>
I have added below css to size input boxes.
input{
width: 20px;
height:20px;
border: solid thin blue
}
Can't you just place those elements like
v-icon {
position: absolute;
top: 0; //or bottom, left, right ro align
}
?
Related
I have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Use label instead of span
Wrap both label and the input with another element.
Use .form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text.
Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets.
And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
How do I center the form inputs in this image? I'm using the GridLayout defined here: https://www.matblazor.com/LayoutGrid using form elements defined here https://www.matblazor.com/EditContext
This is my attempt but i must be missing something:
<div class="container login-layout mat">
<MatCard>
<MatCardContent>
<EditForm Model="Login" OnValidSubmit="Success">
<div class="mat-layout-grid">
<div class="mat-layout-grid-inner">
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatH2>Login</MatH2>
</div>
<div class="mx-auto
mat-layout-grid-cell
mat-layout-grid-cell-span-12">
<MatTextField ValidationDisabled="true" Label="Username" #bind-Value="Login.Username" />
<MatTextField ValidationDisabled="true" Type="Password" Label="Password" #bind-Value="Login.Username" />
</div>
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatButton class="float-right">Log in</MatButton>
#*<MatButton class="float-right" #onclick="OnLoginClick">Log in</MatButton>*#
</div>
</div>
</div>
</EditForm>
<div class="container">
<MatCaption>Need an account? </MatCaption>
<MatButton class="float-right aslkjd-c0ass" #onclick="OnSignUp">Sign up</MatButton>
</div>
</MatCardContent>
</MatCard>
</div>
mx-auto or say margin auto in x axis work in div if you provide it a width or max-width. try using it on input field itself or try giving div a width or you can use flex justify content: center and flex-direction: column on the div
A screenshot
I`m using bootstrap to create an image radio button, and I'm trying to position the radio button on the right corner of the image, tried absolute positioning but its not working, maybe I'm just missing something.
https://codepen.io/jhongeric/pen/eYNrgPP
div {
margin-left: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="custom-control custom-radio image-checkbox">
<input type="radio" class="custom-control-input myinput" id="ck2a" name="ck2">
<label class="custom-control-label" for="ck2a">
<img src="https://via.placeholder.com/350
C/O https://placeholder.com/" alt="#" class="img-fluid">
</label>
</div>
.custom-control-label::before{left:auto;right:0;}
https://codepen.io/vadivel-tlga/pen/NWqMdQX
I want the login and register button in right,and Search button in Center, I searched alot but didn't get any solution.
And also how can I align text area in a proper position.
Here is my html code:
<body ng-app="starter">
<ion-pane style = "background-color:#4992E2;">
<ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
<h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
</ion-header-bar>
<ion-content >
<div class = "row center">
<div class="col">
<button class="button button-small button-light" >
Login!
</button>
<button class="button button-small button-light">
Register Here!
</button>
</div>
</div>
<div class="item-input-inset">
<h4>Date</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Suburb</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Clinic</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<button class=" center button button-small button-light">
Search
</button>
</ion-content>
</ion-pane>
</body>
I know in the bootstrap, but I am new to ionic, please tell me how can I do this.
You should put the button inside a div, and in the div you should be able to use the classes: text-left, text-center and text-right.
for example:
<div class="row">
<div class="col text-center">
<button class="button button-small button-light">Search</button>
</div>
</div>
And about the "textarea" position:
<div class="list">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" placeholder="Text Area">
</label>
Demo using your code:
http://codepen.io/douglask/pen/zxXvYY
Css is going to work in same manner i assume.
You can center the content with something like this :
.center{
text-align:center;
}
Update
To adjust the width in proper manner, modify your DOM as below :
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
Demo
final update
If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
Demo
To use center alignment in ionic app code itself, you can use the following code:
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
To use right alignment in ionic app code itself, you can use the following code:
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
Ultimately, we are trying to get to this.
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>
And if we want to align a checkbox to the right, we can use item-end.
<ion-checkbox checked="true" item-end></ion-checkbox>
Another Ionic way. Using this ion-buttons tag, and the right keyword puts all the buttons in this group to the right. I made some custom toggle buttons that i wanted on one line, but the group to be right justified.
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
center tag aligns the buttons within it as expected:
<ion-footer>
<ion-toolbar>
<center>
<button royal>
Contacts
<ion-icon name="contact"></ion-icon>
</button>
<button secondary>
Receive
<ion-icon name="arrow-round-back"></ion-icon>
</button>
<button danger>
Wallet
<ion-icon name="home"></ion-icon>
</button>
<button secondary>
Send
<ion-icon name="send"></ion-icon>
</button>
<button danger>
Transactions
<ion-icon name="archive"></ion-icon>
</button>
<button danger>
About
<ion-icon name="information-circle"></ion-icon>
</button>
</center>
</ion-toolbar>
</ion-footer>
I've created extremely simple form that contains 2 inputs and 2 buttons.
When I would like my form to take 6 spans width and be centered.
Below is my code:
<div class="container-fluid padded">
<div class="row">
<div class="container">
<div class="row">
<!--filtry-->
<div class="span6 offset3 padded" style="border: 1px solid black;">
<form action="#" method="get" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Data od</label>
<div class="controls">
<input type="text" id="dataOd" class="input-xlarge" />
</div>
</div>
<div class="control-group">
<label class="control-label">Data do</label>
<div class="controls">
<input type="text" id="dataDo" class="input-xlarge" />
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>
<a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
My form in full size browser looks like this:
but after resizing it I get this result:
How should I change my code to get those input 100% width on every resolution?
Is there any simple way or do I must tweak whole bootstrap?
I've tried adding span* classes to inputs but without any luck.
There are similar questions on SO (https://stackoverflow.com/a/11193864/965722), but answer involves JavaScript and I would like to avoid that.
Here is jsfiddle with my code: http://jsfiddle.net/Misiu/HdSEn/
You need to increase the width of the span. Set span8 instead of span6.
Demo : jsfiddle.net/HdSEn/3
OR
If you want display full width of the box on page, add span12 instead of span6
jsfiddle.net/HdSEn/5/
Updated
<div class="span7 offset3 padded well">
The problem is, form is greater than span7. Like form width> span7,6,5,4.... So you need to set width for input box.
Demo: http://jsfiddle.net/HdSEn/18
Hope this solves your issue:
JSFiddle Demo
CSS:
input[type="text"] {
min-height:30px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}