Question

我使用了闪亮的仪表板包装，并且标题需要有标题，文本和徽标。

标题应在左侧，文本应在标题的中间/中央，徽标应在右侧。仪表板侧栏还具有两个过滤器（选择输入）。中间的文本显示用户的选择，因此文本的长度因各种选择而异。我没有CSS背景，也不确定如何将可变长度文本放置在标题中心。另一个问题是，当我最小化屏幕时，文本和徽标会彼此叠放，并且不会排成一行，如下所示：

为了简化代码，我只使用了一个简单的文本，但这里没有显示服务器代码，但是“长短不等的文本取决于用户的选择”基本上是uiOutput，并且会根据选择。

shinyApp(
  ui = dashboardPage(
dashboardHeader( 

  title = HTML(paste0("Dashboard example")) , titleWidth = 455,
  tags$li(class="dropdown",
          tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
                     tags$tr(
                       tags$td(h3("long text with variable length dependant on user selections")),
                       tags$td(
                         a(href='link',
                           img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
                               title= "image title", height = "50px"),
                           style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
                         class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
  tags$style(HTML("
                  .my_class {
                  font-weight: bold;
                  color:white;
                  }"))
))),
  server = function(input, output) { }
  )

最小化屏幕会中断标题，如下所示

使用下面提供的代码，我明白了。

Answer 1

尝试这样的事情：

  <!-- SELECT SERVICE AND PROVIDER -->
            <div id="wizard-frame-1" class="wizard-frame">
                <div class="frame-container">             
                    <h3 class="frame-title"><?= lang('step_one_title') ?></h3>
            <div class="form-group">
                      <label for="select-service">
                                <strong>Enter Location:*</strong>
                            </label>
                                <input type="text" id="location-name" class="required form-control" maxlength="120" required/>  
                    </div> 
                    <div class="frame-content">
                        <div class="form-group">
                            <label for="select-service">
                                <strong><?= lang('select_service') ?></strong>
                            </label>
                            <select id="select-service" class="col-xs-12 col-sm-4 form-control">
                            </select>
                        </div>
                        <div class="form-group" id="selectprovider">
                            <label for="select-provider">
                                <strong><?= lang('select_provider') ?></strong>
                            </label>

                            <select id="select-provider" class="col-xs-12 col-sm-4 form-control"></select>
                        </div>

                        <div id="service-description" style="display:none;"></div>
                    </div>
                </div>

                <div class="command-buttons">
                    <button type="button" id="button-next-1" class="btn button-next btn-primary"
                            data-step_index="1">
                        <?= lang('next') ?>
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                </div>
            </div>

在仪表板标题中间对齐具有可变长度的文本

1 个答案: