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
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.
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
I'm working with input fields in PrimeNG and not really sure how to move labels to left of fields. Here's an image of what I'm trying to do:
Here's my working code:
PLUNKER
<div class="ui-g-12 ui-md-6 ui-lg-4">
<label>Set Date</label>
<input id="input" type="text" size="30" pInputText [(ngModel)]="text">
</div>
You can use a small column ui-grid-col4 for the labels and a bigger one ui-grid-col8 for the inputs :
<div class="ui-g ui-fluid">
<div class="ui-grid-col-4">
<span>Phone Ext</span>
</div>
<div class="ui-grid-col-8">
<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
</div>
<br/><br/><br/>
<div class="ui-grid-col-4">
<span>Serial Number</span>
</div>
<div class="ui-grid-col-8">
<p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
</div>
</div>
See working Plunker
If you want more details about the grid, see the doc
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
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;
}