Styles for tabs widget should be fixed to fill space available

timbl commented 4 years ago

Currently, eg in the meetulator, the body of the tab doesn't fill the whole space available to it. It should

timbl commented 4 years ago

Suggested layout for the vertical left hand tabs from @jaxoncreed is

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="content">
      <nav class="tabs">
        <ul>
          <li>Emmet's Team Workshop</li>
          <li>Arrivals and Departures</li>
          <li>Emmet's Slides</li>
          <li>How to write epics and user stories best practice 1d349293403</li>
        </ul>
      </nav>
      <main class="iframeMain">
        <iframe src="https://www.medium.com"></iframe>
      </main>
    </div>
  </body>

</html>

with CSS

/* Styles go here */
body {
  margin: 0;
  font-family: sans-serif;
}

.content {
  display: flex;
  min-height: 100vh;
}

.tabs {
  background-color: #333;
  flex: 1;
  min-width: 150px;
  max-width: 400px;
}

.tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  margin: 0px;
  margin-left: 8px;
  padding: 8px;
  text-align: right;
  color: white;
  cursor: pointer;
  border-radius: 16px 0px 0px 16px;
}

.tabs li:hover {
  background-color: #777;
}

.iframeMain {
  flex: 2
}

iframe {
  height: 100%;
  width: 100%;
}

megoth commented 4 years ago

Can this be closed now? AFAIK these changes has been implemented.

megoth commented 4 years ago

(I'll close the issue, let me know if it needs to be reopened.)

SolidOS / solid-ui

Styles for tabs widget should be fixed to fill space available #183