Button text on Android


#1

The “+” text is not showing up on android. But it’s showing up on iPhone. Any clues?

<Button
	col="1"
	text="+"
	class="button-bg" (tap)="handleTap()">
</Button>

and here’s the CSS class associated with that button.

button-bg {
  width: 24px;
  height: 24px;
  border-radius: 12;
  background-color: #45555f;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

I also tried changing the text from a “+” to some other text “abc”. Still does not show up.

Any help would be greatly appreciated.


#2

Is it a specific parsing error because of your px? NS don’t know px.
Col=1… Error with available space in grid? Did you test without width or width = 100?
Why you wrote (tap) =…?


#3

Good eye @ben I didn’t even notice the px in styles. @nikhilwins just use the number for those properties. See if that solves the issue. @Ben the tap handler on his button is for angular binding I believe.


#4

Thank you @bradwaynemartin :nng: is not my business :relieved:


#5

@Ben & @bradwaynemartin I removed the px .

Here’s what the CSS class now looks like

.button-bg {
  width: 24;
  height: 24;
  border-radius: 12;
  background-color: #45555f;
  color: white;
  font-weight: 700;
  font-size: 18;
}

Still nothing.

Also, the col="1 is coming from a GridLayout which wraps the button. This is not an issue either, as I deleted it, and the text still does not show up.


#6

Hi nikhilwins,

if you are coding :nng:, i can’t help you. But if you reduce your xml to the surrounding grid and remove all unnecessary elements around the needed button and the button text fails again, i would try remove the (all!) surrounding theme(s) (including the standard ns-theme). Is there an android-tag that handels the text position through padding/margin etc.? Have you checked: is the text visible as a lable not as a button? What happens when you increase font-size? Lastly, if you delete all the css-rules, is the text visible?

.button-bg looks like :nng: -naming, so i do not understand what happens in the background.

My thoughts on this is this is happening via theme or angular, most likely because special tags / css, so i would check the grid and the button and more again in a new and clean app, first without angular :wink: