Edit the style of the external div tag of a box in Shiny

Asked

Viewed 190 times

7

I’m developing an app on R’s Shiny, and I’m having trouble editing the tag out of a box.

When I turn the remote:

box(
  title = 'Teste',
  width = 4
)

the corresponding HTML it creates is:

<div class="col-sm-4">
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">Teste</h3>
    </div>
    <div class="box-body"></div>
  </div>
</div>

Exists the parameter style in box(), but it changes only the class "box-body" and I wanted to change the class "col-sm-4" without having to input HTML into my code?


For example, if I spin:

box(
  title = 'Teste',
  width = 4,
  style = 'padding-left: 0px;'
)

It generates:

<div class="col-sm-4">
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">Teste</h3>
    </div>
    <div class="box-body" style="padding-left: 0px;"></div>
  </div>
</div>

But I want to:

<div class="col-sm-4" style="padding-left: 0px">
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">Teste</h3>
    </div>
    <div class="box-body"></div>
  </div>
</div>
  • I think you need to give a ' . ' in class, just this

2 answers

2


I was able to find a solution.

When I create the box with width = NULL it does not come within a div, so I can create the div myself (in the R is the column()), but you get an extra div.

For example:

box(
  title = 'Teste',
  width = NULL
)

turns into

<div>
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">A</h3>
    </div>
    <div class="box-body"></div>
  </div>
</div>

So if I do:

column(
  width = 4, style='padding-left: 0px;',
  box(
    title = 'A',
    width = NULL
  )
)

have

<div class="col-sm-4" style="padding-left: 0px;">
  <div>
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">A</h3>
      </div>
      <div class="box-body"></div>
    </div>
  </div>
</div>

0

I don’t know what it’s like in Shiny but in css would be

.box {

  width : 4px;
  padding-left: 0px;
}

I don’t know if it helps.

  • In this case, it would be the class . col-Sm-4 more there would all change with that name. I did some tests here and I ended up finding a solution in Shiny itself.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.