html - Semantic ui left menu taking too much space -

-

i trying make dashboard structure using semantic-ui.

i have no other css semantic-ui, , don't load javascript (not semantic-ui), since use react manage lifecycle of elements.

i trying have :

  • the "about" page occupies orange part of screen, , more (instead of menu taking orange part well).
  • a footer sticks bottom

here structure of page (react data removed) :

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>      <div class="app-wrapper" id="app">         <div>            <div>               <div id="header">                  <div class="header page">                     <div class="container ui">                        <div href="#" class="floated icon menu right text ui">user</div>                        <div class="menu text ui">                           <a href="geodb.io/home" class="icon item"><i class="emphasized github huge icon mark"></i></a>                           <a class="item">                              <div class="input labeled small ui user">                                 <div class="label ui">this project</div>                                 <input type="text" placeholder="search">                              </div>                           </a>                           <a href="#" class="item">home</a>                        </div>                     </div>                  </div>               </div>               <div id="menu">                  <div class="menu pointing secondary ui vertical">                     <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a></div>                  </div>               </div>               <div class="container content main text ui">                  <div class="dividing header ui">about</div>                  <div id="view">                     <div>about page</div>                  </div>               </div>               <div id="footer">                  <div class="footer">                     <div class="divider section ui"></div>                     <div class="container ui">                        <div class="disabled item">copyright</div>                        <i class="github icon large mark"></i>                     </div>                  </div>               </div>            </div>         </div>      </div>

edit sources:

alright, did testing , found this.

i'm assuming code example direct child of <body> tag,

my changes:

  • removed 2 classless, idless wrapper divs between div.app-wrapper , div.header
  • added class site app-wrapper
  • added class .site-content .container.content.main

if leave 2 in place, footer won't stick @ bottom. here's css code

.site {         display: flex;         min-height: 100vh;         flex-direction: column;     }      .site-content {         flex: 1;     }      #footer {         background-color: #333;         width: 100%;         bottom: 0;         position: relative;     }

that's how works in local enviroment.

result image

feedback appreciated

.site {    display: flex;    min-height: 100vh;    flex-direction: column;  }  .site-content {    flex: 1;  }  #footer {    background-color: #333;    width: 100%;    bottom: 0;    position: relative;  }
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />  <div class="app-wrapper site" id="app">    <div id="header">      <div class="header page">        <div class="container ui">          <div href="#" class="floated icon menu right text ui">user</div>          <div class="menu text ui">            <a href="geodb.io/home" class="icon item"><i                                  class="emphasized github huge icon mark"></i></a>            <a class="item">              <div class="input labeled small ui user">                <div class="label ui">this project</div>                <input type="text" placeholder="search">              </div>            </a>            <a href="#" class="item">home</a>          </div>        </div>      </div>    </div>    <div id="menu">      <div class="menu pointing secondary ui vertical">        <div><a href="/" class="item">index</a><a href="/faq" class="item">faq</a><a href="/about" class="item active">about</a>        </div>      </div>    </div>    <div class="container content main text ui site-content">      <div class="dividing header ui">about</div>      <div id="view">        <div>about page</div>      </div>    </div>    <div id="footer">      <div class="footer">        <div class="divider section ui"></div>        <div class="container ui">          <div class="disabled item">copyright</div>          <i class="github icon large mark"></i>        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more