0

Am trying to create navbar with logo but unable to increase the size of image.

This is written in kotlin/js but concept should be same for native html/js code.

Html index file:

fun HTML.index() {
  head {
    title("Welcome to Seller Service")
    link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.css") { }
    link(rel = "stylesheet", href = "static/styles/index.css") {}
  }
  body {
    div {
      id = "index"
    }
    script(src = "/static/output.js") {}
    script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
  }
}

React kotlin/js code to replace div with index id:

  override fun RBuilder.render() {
    div(classes = "section") {
      div(classes = "container") {
        nav(classes = "navbar") {
          div(classes = "navbar-brand"){
            a(classes = "navbar-item"){
              img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
              }
            }
          }
        }
      }
    }
  }
}

css seen from console in browser:

.navbar-item img {
    max-height:1.75rem
}

.img-style {
    <strike>max-height:4rem;</strike>
}

max-height:4rem; my max-height is not applied, any idea why?

Tarun Chawla
  • 508
  • 4
  • 17
  • Does this answer your question? [Why are my CSS properties being overridden/ignored?](https://stackoverflow.com/questions/10442670/why-are-my-css-properties-being-overridden-ignored) – Pawel Veselov Apr 18 '21 at 00:30
  • I did a workaround with this: .navbar-item > img { max-height: 4rem; } The link you shared says id is higher priority but here the things am inheriting are also class based so where is the priority causing the issue here? – Tarun Chawla Apr 18 '21 at 05:40
  • You probably should look at the overall rules that govern the order of applying the styles: https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override – Pawel Veselov Apr 18 '21 at 19:26
  • Understood, it solves my question. – Tarun Chawla Apr 19 '21 at 05:00
  • @PawelVeselov can you please add an answer, I will accept it and close this – Tarun Chawla Apr 19 '21 at 05:01
  • This will be a "link only" answer (because I don't really know what your problem was), and is not a good idea. I did flag this question to be closed as a duplicate, which is more appropriate in this case. However, what you can counter this with - is to answer your own question, explaining, in details, the entire problem, and the solution. – Pawel Veselov Apr 19 '21 at 11:12
  • I think answer is identifying which rule is overriding your rule and try to override it because I don't have any control on the causing class. – Tarun Chawla Apr 19 '21 at 11:34

1 Answers1

1

It is overall governed by order of properties. I solved this problem by overriding the same rule in my css and linking it to the page.

.navbar-item > img { max-height: 4rem; }

I override this rule of navbar-item class direct children img.

Tarun Chawla
  • 508
  • 4
  • 17