Making a form with Material-ui + react. Is there a way to layout the labels to the side of input fields? It's much more readable.
so like this:
name [input]
title [input]
rather than
name
[input]
title
[input]
I can only find fields that have the label and input area mashed together in one.
I could build my own component or a grid, but it seems this is an obvious layout that should exist.
docs page
https://material-ui.com/components/text-fields/
I got the same issue, the only way I've found to solve the problem was by using "sx" which allows you to override the CSS.
<InputLabel htmlFor="login" sx={{display: 'inline'}}>Login :</InputLabel>
<Input id="login" type="text" value={login} onInput={ e=>setLogin(e.target.value)} />
Related
I already found threads about this topic like these:
How to hide <label for=""> CSS
How to select label for="XYZ" in CSS?
So I thought it's going to be easy, but for now I had no success.
The label I try to reach is this one:
Inside of code snippets I tried the following:
label[for=payment_method_angelleye_ppcp]
.label[for=payment_method_angelleye_ppcp]
label[for="payment_method_angelleye_ppcp"]
.label[for="payment_method_angelleye_ppcp"]
After a couple of Google sessions, I wasn't able to find any other way of writing. It also seems that you don't set a "." in front of it for this case, but I also tried it, of course.
I believe label[for="name"] is the correct format in general...
But it seems something is missing. Inside the label there is a text and an image, but I don't assume that this plays a role in selecting the label?
I put one in CSS and 1 in javascript
document.querySelector('label[for="ABC"]').style.color = 'blue';
label[for="XYZ"] {
color: red
}
<label for="XYZ">XYZ: </label>
<input id="XYZ">
<label for="ABC">XYZ: </label>
<input id="ABC">
Pierre's answer is good, I just want to clarify that label is an HTML element. Unless you have a CSS class "label", you would not be adding a period in front of the selector in CSS.
You're correct, the content (images and text) inside of a label will not affect the selector we're trying to use but there may be other CSS interfering with what you're trying to do.
I'm using NgbTypeahead, and it's working properly. But instead of creating a dynamic popup window with the results, I'd like to show the results in a list in DIV.
I think I'm supposed to use the container property to do this, but I've this:
<input #quickSearch id="typeahead-template" type="text" class="form-control popup-search"
[ngbTypeahead]="searchWithTemplate" [resultTemplate]="searchResultsTemplate"
(selectItem)="searchResultSelected($event)" [container]="resultsContainer"
[inputFormatter]="formatter" [placement]="'bottom-left'"
[placeholder]="isSearchInitialized ? 'Search for...' : 'Please wait... initializing quick search...'"
[disabled]="!isSearchInitialized"
style="width:100%">
and it doesn't work. Help appreciated.
Maybe I'm stating the obvious but the docs say it only supports body
A selector specifying the element the tooltip should be appended to. Currently only supports "body".
I'm looking to have a placeholder text like this:
<input type="text" placeholder="Name: *" />
But I'm trying to figure out how to get the * to be a different color. There are many solutions on here that don't work in modern browsers anymore.
You can create a dummy placeholder with input value and on focus/blur just hide/show respectively the placeholder.
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
I am attempting to modify the width of the ninja form text inputs on my wordpress site. I am able to call each individually by id with:
#ninja_forms_field_6 {width:25%; min-width:250px;}
However, I would like to do so by class. However, I can't seem to figure out the correct class to call. I have looked at the source code and it displays:
<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field ninja-forms-req " value="" rel="6" />
<div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error">
</div>
When I've tried to use:
.ninja-field ninja-forms-req {width:25%; min-width:250px;}
Nothing seems to happen. In particular, my css editor doesn't seem to like the space between ninja-field and ninja-forms-req. I've found some other answers that indidcate these are two separate tags, but I still can't seem to get the text inputs to respond to my inputs. I should note that I am using the "Simple Custom CSS" plug-in to make changes to CSS. Any help in advance would be appreciated. Thanks.
Try .ninja-field.ninja-forms-req.
When targetting multiple CSS classes on the same element you need to separate them with periods.
I found this to work really well with ninja forms and their issue with the width of buttons in some themes. This also solved my problem using the custom css plugin. Just use the height according to your theme button height.
.ninja-forms-field {
width:100%!important;
height:50px!important;
}