I'm having a button and angular js material date picker in a row. Date picker is not aligned correctly. I tried adding a margin too. Without using an additional CSS file ,(adding in line css) please help me to align these components.
<div>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
<md-input-container>
<label for="jobDate">Export date</label>
<md-datepicker
ng-model="model.exportJobsDate">
</md-datepicker>
</md-input-container>
You can use layout="row" and then flex by giving the distribution,
<div class='calendarDiv' layout="row">
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex=60>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
</div>
</div>
DEMO
Related
we're using this lib : https://github.com/angular/flex-layout
so far, we have below code to achive the fxlayout, but it did not work in mobile device.
<div fxLayout="column" id="width">
<div class="table-cell" fxLayout="row">
<div fxLayout="column" class="columnlabel">
<label class="f_label margintop">width </label>
</div>
<div fxLayout="column leftpadding">
<input type="number" matInput
style="font-weight: bold;background: white;margin-top: 2px;" name="width">
</div>
</div>
</div>
what i am looking for is,
when it is mobile device want input control as underneath to label
when it is large device want textbox on right side
but in some case want input control on right side in mobile also, for example, tongle switch control.
please click on below link for sample representation, and can you please guide me what i am missing ?
sample
provided sample work on stack blitz as requested in comment. Thanks
https://flex-layout-angular-material-wqeqvc.stackblitz.io/
https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html
What you want to achieve is probably something like that with their responsive API:
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Sports </label>
<input type="number" matInput>
</div>
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Country </label>
<input type="number" matInput>
</div>
By default with fxLayout, it will be in ROW and when the screen is bigger than xs, then it's in column with fxLayout.gt-xs
I'm making a form-inline using Bootstrap 4, but when I use a button, the position of the button is always at the top of the row, I want the button's position to be the same as the input field's position, which is in the middle of the row.
<form role="form" id="form_tambah_kriteria" class="margin-bottom-0">
<div class="form-row">
<div class="form-group col-md-4">
<label>Tipe Decision Maker</label>
<div class="input-group">
<div class="input-group-append"><span class="input-group-text"><i class="ion-ios-contacts"></i></span></div>
<input type="text" name="tipe_dm[]" class="form-control" placeholder="Tipe Decision Maker">
</div>
</div>
<div class="form-group col-md-4">
<label>Owned by:</label>
<div class="input-group">
<select class="form-control" name="owner_dm">
<option value="">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<button class="btn btn-danger">Delete</button>
</div>
</form>
The following is Codepen
The simple fix is to wrap the button in a form-group and prefix it with some invisible text ( or <br />). But it would be dead wrong, just a handy hack, because it would simply hide the underlying problem with your codepen.
The proper fix would be to:
use latest stable version of Bootstrap - your pen currently uses v4.0.0-alpha5 which doesn't contain a lot of bugfixes and, among others, does not contain Bootstrap's flexbox classes)
wrap the button in a .form-group.col-md-4
use d-flex align-items-end classes on the .form-row
Working example: https://codepen.io/andrei-gheorghiu/pen/KKKNxZg
Note: until you start using the latest stable version of Bootstrap's CSS, you'll keep running into problems which seemingly don't make any sense, because the version you're using is a pre-release which does not include a lot of what most Bootstrap 4 examples take for granted.
the solution is easy just add <br> before the button Delete for new line...like this:
<br> <button class="btn btn-danger">Delete</button>
You should put the button in the third column grid and use the <br /> .
you should do it as below:
<div class="form-group col-md-4">
<br />
<button class="btn btn-danger">Delete</button>
</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
I want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.