I have a Material UI phone number and when my website is displayed RTL, the phone number aligns itself to the right, but the number also gets messed up. How can I make sure that the number stays as is?
<div open={this.props.open} onClose={this.props.onClose} dir="rtl">
<DialogTitle title="New User" />
This text will be RTL led !
<div>
<Typography component="label">'Phone Number'</Typography>
<MuiPhoneNumber
name="phone"
data-cy="user-phone"
defaultCountry={"us"}
value={this.state.phone}
value="1(937)-123-4567"
onChange={this.handlePhoneChange}
/>
<p>614-764-6300</p>{" "}
{/* number is right aligned but number stays the same which is how it should be*/}
</div>
</div>
Here is the codesandbox link https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js
I get the same behavior on any HTML input element with type="tel", and that has dir="rtl".
If you want to keep that field left to right you can give it a prop inputProps={{dir: "ltr"}} and make the text aligned to the right with some CSS like text-align: right;
Related
I am having an issue when using <#nested in FreeMarker
If I do:
<div style="background: white;">
<#nested "header">
<#nested "info">
<#nested "form">
</div>
<div>NOT WHITE</div>
Even the div with NOT WHITE text has a white background. The div itself also gets nested inside the previous div for some reason. Can someone help me here?
Probably your actual nested content (which you don't show in your question) has an unclosed div. Thus the </div> you have after <#nested "from"> closes that unclosed div, and so the div that sets the white background stays open.
I am learning material-ui v5 and it's new styling system, using sx, how do I set a bunch of different element on the same line to have the same height?
<Mui.Box m={2}
component="form"
sx={12}
md={12}
noValidate
autoComplete="off"
>
<Mui.Card variant="outlined" raised sx={{ p: 2 }}>
<Mui.Grid container
spacing={2}
direction="row"
alignItems="center"
justifyContent="center">
<Mui.Grid item xs={12} md={3}>
<Mui.TextField
required
fullWidth
id="password"
label="Password"
type="password"
defaultValue=""
helperText="Some important text"
/>
</Mui.Grid>
<Mui.Grid item xs={12} md={3}>
<Mui.Button
fullWidth
variant="contained"
size="large">
Authenticate
</Mui.Button>
</Mui.Grid>
</Mui.Grid>
</Mui.Card>
</Mui.Box>
Here is what it currently look like:
As you can see they have different height and are not aligned vertically, how do I fix this?
Hover the grid items and you'll notice that the alignItems="center" is possibly starting you at a bad spot.
Change this to top then you know the elements are starting at the same spot. Seeing as you have the helperText, I think the best option is to then set your button height to match the TextField.
So, change the grid container prop alignItems="center" to alignItems="top" and then add something like sx={{ height: "56px" }} to your button.
If you need to do this frequently, make the button a styled component so you don't need to keep adding the sx prop.
See it here: https://codesandbox.io/s/usage-forked-tn7rw?file=/index.js
By the way, line 3 looks like it should be xs, not sx.
You can't control the height of the text box and the button precisely enough in MUI to make them exactly the same height, the "large" button is just slightly larger than a "small" text field.
But you can at least align them better by using alignItems="stretch" in the outer <Mui.Grid>:
But, in general it's much better to organize forms vertically, in a single column:
Single column forms convert a lot be!er than multi-column ones because you only have a single path to follow with your eyes, instead of jumping between blocks.
I'm trying to make a text input area like this.
I tried this way
<v-text-field
label="Outlined"
placeholder="Placeholder"
background-color="white"
append-icon="mdi-arrow-right x-large primary"
outlined
></v-text-field>
And it give me this result.
Issues are
Icon doesn't get large enough to fill the entire text-area
Can't change the color of arrow stroke
What should I do to make this text area also receives file drag and drop?(user might want to type or sometimes drop a file to the text area
Thank you so much.
Hope someone who are well knowledgeable about vuetify could help me.
for part of your question about input design and look you should use provided slot from the v-text-field component, this way you can achieve more and here is the vuetify documentation about this: text field icon slots
and to check what other slots is available for this component check this list: all text field slots
even though using slot would achieve a lot more than prop, to fully achieve the desired result you might need to overwrite some css styles that you can find by inspecting the element in the browser dev tool to find them out.
I made the look you wanted with the approach described above in the code below:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
padding-right: 0 !important;
}
.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
margin-top: 0 !important;
}
.pointer {
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field label="Outlined" placeholder="Placeholder" outlined>
<template v-slot:append>
<v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer" width="50" height="56">
<v-icon dark>
mdi-arrow-right
</v-icon>
</v-sheet>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
about the drag and drop issue vuetify's v-file-input component does not natively support this behavior (for now at least) but you can read the article below to find out how to write this feature in vuetify:
Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)
I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select's text is in the bottom left corner of the element.
Does anyone know how to vertically-align the text inside an HTML select element?
Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn't actually valid html.
However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.
So in this case you would need to set line-height: 28px; to match height: 28px;.
For your html I would recommend either using:
<input type="text" /> if you are looking for a standard text input
or
If you are looking for a drop down selection:
<select>
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
</select>
Is it somehow possible to place a span as the value of a text input field?
I am making a mailing system for a website and want a nice looking receivers input field, where added receivers are contained and added to the value of input text field. At the moment i use a separate "adding field" while showing added receivers in a span-container. I want to merge these to fields together. Just like any input field in regular e-mail software.
Help would be most appreciated! Thanks in advance!
Short answer: no, you cannot include a <span /> within an <input />.
You have a few options. You could use javascript to emulate behaviour like the email To: field. E.g. listen to key presses and handle actions like backspace after a ;.
Another option would be to make a list appear (css styled) like a textbox. Have the last <li /> contain a textbox with cleared styles. Every time the user adds a new email then insert a new <li /> before the textbox.
E.G.
html:
<ul class="email-textbox">
<li>bob#email.com;</li>
<li>jane#email.com;</li>
<li><input type="text" /></li>
</ul>
css:
.email-textbox {
background-color: #fff;
border: 1px solid #ccc;
padding: 2px 4px;
}
.email-textbox li {
display: inline-block;
list-style: none;
margin-left: 5px;
}
.email-textbox input {
background: none;
border: none;
}
javascript (jQuery, can change to vanilla)
$(function () {
$('.email-textbox').find('input').focus();
});
You will need to extend this javascript to include a keypress handler etc, but it gives the general idea.
Demo: http://jsfiddle.net/UeTDw/1/
Any option will require some javascript however.
If you can use jQuery, you could check out jQuery UI autocomplete
One way to do it would be to layer a text input on top of a div that is styled to look like a text input.
<div id="fake-input">
<span class="input-item">John Doe</span>
<span class="input-item">Jane Deere</span>
<input id="receiver-input" type="text" />
</div>
You can strip all styling off of receiver-input, and add borders, background colors, and such to fake-input so that it appears to be a text field. When a receiver is added, you can create a new input-item span and append it to the list.
Input text fields are typically used to accept raw text input. Attempting to wrap input text inside of a text field opens you to user error and potential difficulties with parsing data if the person is able to manipulate the tags.
Personally I would suggest keeping your current method but enabling some form of AJAX support to make things more dynamic and less error-prone to the user.
(My $0.02)
TextExtjs is probably what you want. It's a jquery plugin for allowing removable tags with autocompletion etc in a textarea.
And here is a related SO discussion - where I found this plugin - on mimicking the similar behavior found in some inputs on facebook.