I have a series of text fields in an Android app. I want to align the text vertically to the center (and horizontally to the left), but I can't find the correct approach.
This is my code:
textField.setUIID("TextFieldSome");
textField.getAllStyles().setAlignment(Component.BOTTOM);
This is the css:
TextFieldSome {
background-color: rgba(255,0, 255, 0.2);
color: blue;
font-size: 9pt;
margin-left: 5pt;
margin-right: 15pt;
margin-bottom: 5pt;
text-align: left;
padding-left: 20pt;
}
This is the result:
I have tried WITHOUT css and using these code variations:
textField.getAllStyles().setAlignment(TextField.BOTTOM);
textField.setAlignment(Component.BOTTOM);
textField.setAlignment(Component.TOP);
textField.setAlignment(TextField.BOTTOM);
But the text always aligns vertically to the center and never to the top or bottom.
What am I missing?
The setAlignment method is defined as:
Sets the Alignment of the Label to one of: CENTER, LEFT, RIGHT
We don't support vertical alignment of text in the API. Even center horizontal alignment isn't supported well in text components because of the complexity related to that. The core problem is switching back and forth to native which would make the text "jump".
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
In Lightbox2 I'm trying to get the caption text centred and wider than the image. I'm using the CSS file section at:
.lb-data .lb-details {
width: 100%;
float: left;
text-align: center;
line-height: 1.2em;
}
By increasing "width" I can get wider text to the right and by changing the "float" to right I can get the wider text to hang to the left.
I've also tried setting "float" to "none" and "inherit" with no success.
What I want to do is have a portrait image with centred text wider than the image.
As the text can be made to be wider than the image I don't think it's a container issue but I could be wrong.
Any suggestions? All help appreciated.
It is a container issue. The div.lb-dataContainer get's a width applied to it that matches the image container above it. To make it wider, you can override it by either by editing the lightbox.js source or by using CSS, ex. .lb-dataContainer { width: 100% !important; }
I am trying to make the checkbox's closer together... without so much space in between vertically.
I'm using a cls to make the font size smaller which is working properly. Any ideas?
.my-class .x-form-cb-label
{
font-size: xx-small;
font-weight: bold;
}
here is a pic of the spacing that is too large
I created my css class, declared margin-bottom: -4px; (you can pick your size) and attached it to checkbox components with help of cls config. Here's the FIDDLE check index.html for css class.
The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?
Website
So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.
So the offending css was
background: url('/images/mobile-device-down-arrow.gif') no-repeat center;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg) scale(1);
we replaced it with
background: url('/images/mobile-device-up-arrow.gif') no-repeat center;
and it fixed the problem.
I remember a bug in webkit for this, but I can't find it right now.
This just happened to me and I managed to fix the issue by wrapping the affected elements that were being shrunk in a div that defined the exact width that the element needed to be, in my case this was: width: calc(100vw - 2rem);
Hopefully this helps anybody having this issue, it seems to only occur on mobile devices when using the rotate transform with transition at any positive degree as when removing the transform, the element reverted to 0deg without shrinking.
I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!
.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.
I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.