I want to style the search filter in my data table so that the label and the input field appear on a single line.
Right now it is appearing like this:
Here's the code for the search filter which I can see via the console.
<div class="dataTables_filter" id="ads-table_filter">
<label>
"Search: "
<input type="text" aria-controls="ads-table">
</label>
</div>
How can I do this?
<style>
.dataTables_filter {
white-space:nowrap;
}
.dataTables_filter label, .dataTables_filter input {
display: inline-block;
}
</style>
<div class="dataTables_filter" id="ads-table_filter">
<label>Search :</label>
<input type="text" aria-controls="ads-table"/>
</div>
Related
I have an Angular 5 component that is basically just a label and input
<div class="form-group">
<label for="wwid">WWID</label>
<input id="wwid" required ...lots of attrs...>
</div>
Using CSS I've then defined a style:
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
When the field is blank, I'm getting two red borders. The one on the input field that I want, but also one to the right of the label that I do not want. How do I get rid of the red line on the label?
Here's the actual full HTML that used by the component.
<ng-template #listSelectionFormatter let-r="result">
<span>{{r.wwid}} - {{r.fullName}}</span>
</ng-template>
<div class="form-group">
<label *ngIf="labelText" for="wwid">
{{ labelText }}
<span *ngIf="isRequired"> <sup class="requiredIndicator">*</sup></span>
</label>
<!-- inputFormatter is the format for what is placed into the input field after choosing from the dropdown -->
<input id="wwid" type="text"
class="form-control"
placeholder="Search by WWID, IDSID, Name or Email"
(selectItem)="onWorkerSelected($event.item)"
(input)="onTextFieldChanged($event.target.value)"
[ngModel]="selectedWorker"
[ngbTypeahead]="search"
[inputFormatter]="selectedResultsFormatter"
[resultTemplate]="listSelectionFormatter"
[disabled]="disabled"
[required]="required"
/>
<span *ngIf="searching">searching…</span>
<div class="invalid-feedback" *ngIf="searchFailed">Lookup failed.</div>
</div>
The requiredIndicator thing is just for an older style I was using to show an asterisk if it was required, and used this CSS:
.requiredIndicator {
color: red;
font-size: larger;
vertical-align: baseline;
position: relative;
top: -0.1em;
}
How do you change the colour of md-input-container label after it contains a certain input? I don't want it to be grey, because it makes it look like it's greyed out. For example, i want to change the colour of the label "Description" after/when the input field contains an input. I have tried modifying md-input-container label in css by using this code but it doesn't work :
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
Here is my html:
<div ng-app="MyApp" ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage">
<md-content layout-padding="">
<div>
<form name="userForm">
<md-input-container class="md-block">
<label>Input-autofocus</label>
<input ng-model="user.firstName" type="text" autofocus>
</md-input-container>
<md-input-container class="md-block">
<label>Input-md-autofocus</label>
<input ng-model="user.title" type="text" md-autofocus>
</md-input-container>
</form>
</div>
</md-content>
</div>
Here is my angular :
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', function($scope) {
});
Here is my code on codepen:
http://codepen.io/zcook/pen/bpxGWJ
If you want the label colour to change when it has input you can use...
.md-inline-form md-input-container.md-input-has-value label{
color: red;
}
If you want the label color to change after a user entered input an moved focus away you can use...
.md-inline-form md-input-container.md-input-has-value:not(.md-input-focused) label{
color: red;
}
What is the best way of lining up the Remove and the input control, and not have it on a different line?
Fiddle here
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> Remove
Bootstrap is telling the input to be 100% wide...so you'd have to adjust that.
JSfiddle With Bootstrap Demo
input.form-control.booking.waypoint {
width:50%;
display: inline-block;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"/>
<label for="">Remove</label>
Try this:
#remove{
display:inline;
}
.booking{
width:50%;
display:inline;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> <p id="remove">Remove</p>
you can use .col-any class name.
For text box
col-lg-7
and for label
.col-lg-5
I want to use the "input with error" styling
as appear here:
http://twitter.github.com/bootstrap/
and after it a custom css only
(relevant row is 722
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
color: #b94a48;
}
)
My markup:
<div id="new_folder_name_div" class="clearfix error">
<label for="new_folder_name">Name </label>
<div class="input">
<input class="medium error" id="folder_name" size="15" type="text" />
<span>*</span>
</div>
An image:
but I see with Chrome console the input element isn't matched with the above css role.
Any idea why ?
The actual input is the next line down. Note that the containing div with classes "clearfix error" is required.
form .clearfix.error input, form .clearfix.error textarea {
color: #B94A48;
border-color: #EE5F5B;
}
<div class="clearfix error">
<div class="input">
<input class="xlarge error" type="text">
</div>
</div>
Try using
$('#folder_name').closest('.clearfix error').addClass('error');
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.