NativeScript / NativeScript/NativeScript

CSS: classes not applied as expected / margins do not work

Open
#7,272 8 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug css help wanted severity: low
Dominant language
TypeScript
Stars
25.7k
Forks
1.7k
Avg merge
1d 5h
Merged PRs (30d)
35

Description

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 5.4.0
  • Cross-platform modules: 5.4.0
  • Android Runtime: 5.4.0
  • iOS Runtime: 5.4.0
  • Plugin(s):

Describe the bug
The NativeScript theme provides some nice helper classes for margin and padding. I wanted to apply a margin-top of 5 to my button. I've used m-t-5 which simply did not work on my button. When I've checked, we've already specified margin: 0 for our button (.btn) class. So first I thought it might be a problem of the the order the classes are applied but I could move them around without any success. For some reason I came up with a solution by adding m-0 to the button as well which does not make any sense for me but it works.

To Reproduce

CSS:

.btn {
    margin: 0;
}

Layout:

<StackLayout class="home-panel">
    <Button class="btn btn-primary" text="Button"></Button>
    
     <!-- Expecting here a margin of 5 at the top, but does not work -->
     <Button class="btn btn-primary m-t-5" text="m-t-5"></Button>

      <!-- This is working for some reason, by adding 'm-0' as additional class, but
	     that doesn't make sense since '.btn' has also 'margin: 0' defined -->
      <Button class="btn btn-primary m-t-5 m-0" text="m-t-5 & m-0"></Button>
 </StackLayout>

css-bug

Expected behavior
My expectation: m-t-5 (or m-t-N) should overwrite the margin: 0 of the .btn class we specified. The current solution is actually something I'd say is incorrect - since m-0 should overwrite m-t-5

Sample project

I've created a pretty simple playground to demonstrate the problem:
https://play.nativescript.org/?template=play-ng&id=ad5EUa&v=3

Only needed to add the css as described above and changed the layout in the home component.


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked NativeScript Playground reproduction and compare how .btn { margin: 0; }, m-t-5, and m-0 are resolved for Button elements. Trace the CSS styling path responsible for shorthand and directional margins; done means m-t-5 applies predictably alongside .btn, with the reported reproduction covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.