What is the best way to set the width of a Material Design Lite multi-line TextField? I set the CSS width to a pixel value, and it works, but when you click on it to enter some text, the underline highlighting does not extent out to the full width of the component. I tried cols="80" and that did not work. I also tried width="100%" and that did not work. I'm working in ReactJS and TypeScript if that makes a difference.
The width needs to be set on the mdl-textfield container div for the text field. For example, this works:
.mdl-textfield{
width:500px;
}
Though that will style all of your textfields. If you only want one of them to be that wide, then define an id or class on the same div as has the mdl-textfield class and apply the style to that. For example:
<div class="mdl-textfield mdl-js-textfield extrawide">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
with the css
.extrawide{
width:500px;
}
Related
Something like the following doesn't work...
<Select
columns={2}
onChange={onChange}
>
{items}
</Select>
Select have only attributes as below :
autofocus, disabled, form, multiple, name, required & size
As Per React DOM build with common : aria-, data-, checked, className, htmlFor, onChange, selected, style, value
As Per react 16+ custom attribute support with following below :
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
Cant find column with Select
I'm using toggle checkboxes by Semantic React UI.
The background color of a checkbox is defined in their styles here :
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #2185d0!important;
}
... But I would like to be able to set a prop that would change that color, like
<Checkbox toggle toggleColor="red"/>
Could I extend that component to achieve that, or is there another way to achieve this ?
Thanks !
Yes you can, but it is not pretty!
I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.
First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.
Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.
Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
background: #000000 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
background: #FFFFFF !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<div class="ui segment">
<div class="ui attached icon form" id="info_input_form">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0">
<label class="coloring black">Toggle</label>
</div>
</div>
</div>
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):
width: "100%,
top: "25px
to the
<div class="modal-dialog" role="document">
as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is
<div class="custom-modal modal-lg modal-dialog">
but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too
<Modal/>
<Modal.Header/>
<Modal.Body/>
and applying those CSS settings to those won't give me the styling im looking for
If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).
For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:
<Modal dialogClassName="custom-modal">
//Modal content goes here
</Modal>
Property documentation
Example with custom css class
I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.
form
<div class="col-xs-12 testFormLabel">
<md-input-container class="testLabel">
<label>Reason</label>
<input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">
</md-input-container>
</div>
css
.md-input-has-value. testLabel > input {
color:#008cba;
}
Problem
How can i change auto focus label name and underline to different color ( let say from dark blue to green )
You can use this selector to change the input:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: red
}
Use this to change the label:
md-input-container:not(.md-input-invalid).md-input-focused label {
color: red
}
Include this after you include the css for angular material.
I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input
Looking at their demo, and inspecting a focused input.
You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.
From the docs...
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.