I trying to do textfield accept numeric only and text align to center, but it no take any effect, Isn't I set wrong properties or another way to set?
<TextField id="btn" android:inputType="number" android:numeric="number" android:textAlignment="center" col="1" backgroundColor="#ffffff" col="2"/>
First. You want to set the keyboardType to number. See the documentation on EditableTextBase
Second, about styling. You really want to set the styling within a CSS file as it helps you separate markup and style. Take a look at the documentation about styling.
But if you want you can use inline styles. However what you've done is that you've tried to pass styling as xml parameters. What you want to do is that you want to pass the styling to the style param like this:
<TextField style="text-align: center;"/>
compare that to what you did:
<TextField textAlignment="center"/>
But as said. You're gonna be a happier developer if you write your style in a separate CSS file, like:
<TextField cssClass="myClass">
and then in your CSS file:
.myClass {
text-align: left;
}
On your submit event you could add in some validation to ensure that the input is a number. You can check this using console.log(typeof var) where var is the value of the text field, it should return integer.
You're best off setting the text-alignment within your CSS file.
Related
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
I use mailchimp to send subscribtion mails. In General forms I can customize the design of mails with Design it tab. But, is it possible to redesign Subscribe button text style, e.g to make Subscribe Button text in uppercase?
e.g #2 Change Subscribe to list to SUBSCRIBE TO LIST
Thanks.
I have found solution for you check screenshots
Step 1: http://awesomescreenshot.com/09161gcr88
Step 2: http://awesomescreenshot.com/06661gcvc5
Output: http://awesomescreenshot.com/0c061gcxfb
Thanks
There are at least two options that you have to change the text for the mailchimp subscribe button. In the embed code that Mailchimp provide there will be a section like this:
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
This is the html for the button.
Option 1:
The css rule that will match this element is #mc_embed_signup .button. So you can add the following lines to your css file and your button should now be uppercase.
#mc_embed_signup .button {
text-transform: uppercase !important;
}
It is important to add !important because it is likely that the mailchimp css file will be loaded after your own css file. If this is not the case then you do not need to add !important.
Option 2:
In the html that they have given you, you can also change the attribute called value to other text, in your case SUBSCRIBE TO LIST.
<input type="submit" value="SUBSCRIBE TO LIST" name="subscribe" id="mc-embedded-subscribe" class="button">
Option 1 separates the two concerns of layout and content, so it might be preferable. However for a simple case like this option 2 would also be acceptable.
How can we set style using hierarchical selector in TSS?
For example in index.xml file I have
<TableView id="myTable">
<TableViewRow>
<Label text="Row"></Label>
</TableViewRow>
</TableView>
For this I want to set Set style to Label inside #myTable
Like in CSS we can do it
#myTable Label{
//style
}
But this is not working in TSS.
So does anyone know how can we set style using an hierarchical selector?
TSS isn't CSS, though both are designed to allow setting visual properties. I am almost positive there is no way to hierarchically set a TSS rule. You must apply to the object directly or to the object as a class. So, you could create a class called 'tablelabel' and set it's properties, then apply the class to the label object in the table... But it's a direct assignment not a hierarchical one.
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
What I have:
I have a generic JSP page that is used throughout my application for displaying certain entities. The code that I am interested in goes like this:
<form:form modelAttribute="object"/>
<core:forEach items="${sections}" var="section" varStatus="itemStat">
<core:forEach items="${section.fields}" var="fieldDef">
<form:input path="${fieldDef.fieldName}"/>
</core:forEach>
</core:forEach>
<form:form>
For each section, and for each field in that section, I have an input having the path fieldName, which is what I want to display from each field.
What I want:
I would like instead of the input to be a simple text, like a label.
What I have tried:
I am most certain that I can do it somehow with <form:label> but I can't really make it work. Making a <form:label path="${fieldDef.fieldName}" /> just tells the browser for which field I need the label, but doesn't get the actual value from it.
I have also tried something like ${object.fieldDef.fieldName}, but in order for this to work I would have to first analyze the value of ${fieldDef.fieldName}, which would give me the name of the column, and then do a ${object.column}, but column being a variable I haven't been able to make this work in any way.
Alternative:
An alternative would be to just make the inputs as disabled and remove the border with CSS, but that would be a dirty way and from what I saw it is also tricky for IE different versions. I am sure that I can handle it directly.
I am a little intrigued by the fact that <form:input path="..."> puts into the input what it finds corresponding to that path (same goes for other form elements), but with label it works different.
So, what I want is basically simple, but I haven't managed to find a way. If someone could shed some light, that would be great. Thanks in advance !
You could look into the spring bind tag. I haven't tried using it before but this may work for you, in place of the input tag
<spring:bind path="fieldDef.fieldName">
${status.value}
</spring:bind>
reference: http://static.springsource.org/spring/docs/1.1.5/taglib/tag/BindTag.html
Instead of
<form:input path="${fieldDef.fieldName}"/>
use
<c:out value="${fieldDef.fieldName}"/>
It would display whatever value is there instead of creating a input field. Hope this helps you. Cheers.
Using the spring form tab, one option would be to use
<form:input disabled="true" path="${fieldDef.fieldName}"/>
To further make it not look like an input you could use CSS to style it to your preference.
Some css styles you could use:
background-color:#EEEEEE;border: 0px solid;
Update:
You could look into the spring bind tag. I haven't tried using it before but this may work for you, in place of the input tag
<spring:bind path="fieldDef.fieldName">
${status.value}
</spring:bind>