using material-ui in react.js, i'm trying to target invalid TextField components with css. i can't use :input:before or :input:after so i'd like to inject a span after the input, so it can be styled with :invalid+span. is there a way pass in a span without rewriting the entire component?
<TextField
required={true}
InputProps={{}}
/>
i suppose i could use InputAdornment but the TextField textarea doesn't place InputAdornment in the same spot. Anyone know how to inject the span after the input element?
Related
I have a form that has a combination of fields of various types.
But it also has some static text intermixed.
I would like to render all the fields (static text and interactive) using the same visual layout.
I, essentially, want <TextField variant='standard' disabled={true}/> but not greyed out, and not disabled.
I could just use a pair of <Typography> tags, but I'd rather not duplicate the implementation that's already available in material UI.
From the documentation, it describes having an uncontrolled field by omitting the value and onChange attribute. The React website says to use a ref on any uncontrolled inputs, but doing this with a TextField only refs its container, a div. What is the recommended way of retrieving the value of an uncontrolled TextField in Material UI? I could use a querySelector to find the element, but that doesn't seem like a proper way.
use inputRef prop on TextField
<TextField inputRef={ref} ... />
you can access its value by this: ref.current.value
A clarification: value deals with controllability, and onChange deals with observability. They are separate from each other.
You only make inputs controlled by setting the value prop. Setting the onChange prop can be used separately to observe the input changes without acquiring control over it, thus, achieving what you are asking for.
The way to provide a ref to the rendered input is via the innerRef prop on the TextField component. Here's the a link to the API where it states that. From there you can access the value of the input as such, ref.current.value
<TextField innerRef={ref} />
When I create a "dumb" html element within a MUI component, for instance:
<Dialog>
<p>I'm just a simple p</p>
<div>I'm just a simple div</div>
</Dialog>
it doesn't apply the font of the style. It does work for some MUI elements (eg labels), but not others (Box) and not on dumb html elements either
Is it possible to configure MUI to apply the typography defined in the theme to every dom element?
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
I would like to break a long line of text assigned to the standard Label widget in GWT.
I was experimenting with inline <br /> elements but with no success.
Something like this:
label = "My very very very long<br />long long text"
You need to use the HTML widget, which extends the standard Label widget, and adds support for interpreting HTML tags.
See the JavaDoc.
I would use CSS to style the label to fit a given with and drop the <br/> all together.