I'm building the design of a small online IDE with Twitter Bootstrap, but i'm failing to achieve the proper layout due to Ace's height problem.
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href=""><img alt="" src=""></a>
<ul class="nav pull-right">
bla bla bla
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<p>This is a sidebar</p>
</div>
<div class="span9">
<div id="editor">asdasdasddas
asd
das
das
das
das</div>
</div>
</div>
</div>
</body>
This is a simple Twitter bootstrap navbar and the container, with two grid columns: one for the sidebar, another for the editor. However, the Ace Editor does not use it's parent height, no matter what i do. How can i create something just like the actual Ace Editor kitchen sink, but using Twitter Bootstrap in a responsive manner (like Cloud9, for example)?
ace uses size of the element to which it is attached
you can do either of following
make span9 position:relative make editor position:absolute;top:0;bottom:0;left:0;right:0
call ace.edit on span9
set editor size with js see https://github.com/ajaxorg/ace/blob/master/lib/ace/ace.js#L96
Related
Hello I have a very simple html structure:
<div class="col-md-3 order-sm-last ms-auto">
Hello!
</div>
<div class="col-md-9 order-sm-first">
Welcome!
</div>
note: These 2 <div> elements are placed inside a container and a row.
Goal is to:
Have Welcome! being displayed after Hello! on large screens,
and on small screens I wanted it to display Hello! under Welcome!.
but using the code above simply puts Hello! after and under Welcome! on any type of screen respectively!
What am I doing wrong here? Thanks in advance!
You need to implement the order class along with the order-{col size} on the divs. This works for me.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="order-2 order-md-9 col-md-9">
Hello!
</div>
<div class="order-1 order-md-3 col-md-3">
Welcome!
</div>
</div>
</div>
I as trying to make a pointing drop down, and it is as Semantic UI's documentation says it should be, but it didn't open to the side when I click,I might be missing something, can you guys help me?
<pre>
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Imagem
<div class="menu">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
</pre>
The Semantic UI dropdown module requires some JavaScript for it to work properly. To just get the menu to show, you can use angular to perform the necessary Javascript work.
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
<i class="dropdown icon" (click)="showMenu = !showMenu"></i>
Imagem
<div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
This won't apply the classes with the proper timing though to do the animations that Semantic UI provides as well. To do that you will have to load the requisite js libraries(jQuery and semantics js files) and get them to play nicely with Typescript.
I have a navbar inside the tab-content that has pull-right bootstrap class ,we are rendering element js-property-panel based on user selection so when this element loads it is overlapping on navbar. So both are iniside cols 10. How can i set position of navbar using pull-right when js-property-panel loads it should moved to right ?
main.html
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
<div role="tabpanel" class="active" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="canvas" style="height:80vh;"></div>
<div id="js-properties-panel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Are you looking for a pure css solution? As this can be achieved with
javascript pretty easily.
Also here is a link of css tricks that might be useful to
introduce conditional styling using css.
Update:
Here is how far I could get to- please follow the fiddle here
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content row">
<div class="col-md-6 col-md-push-6 navwrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div role="tabpanel" class="col-md-6 col-md-pull-6" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="js-properties-panel" class="panel-contents">
sample content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Observations:
What you are trying to achieve is controlling the style of an element
higher up the DOM tree using a state an element lower down the tree.
Neither those elements are direct parent-child nor are those siblings
so you could control using common class and may be adding a
:not(:empty) selector.
You could still use the column-ordering to a certain extend though
I just started learning HTML and CSS a week ago, and have been learning using coursera and codeacademy. I wanted to make a simple website using bootstrap, with a navigation bar on top, and a big cover pic below that.
The code looks as follows.
<body>
<header class="container">
<div class="logo"> <!--this is where the logo resides-->
<div class="row"> <!--making a row for header elements-->
<figure class="col-xs-7">
</figure>
<div class="col-xs-5" > <!--adds the 3 buttons on top right-->
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="row">
<figure class="col-xs-12"> </figure> <!--cover pic-->
</div>
</div>
</body>
</html>
When I open the html in the browser (with the style sheet), I get the image attached. enter image description here. I though the cover pic would automatically align within the 12 column grid below the navigation bar on top, cropping out the sides. My questions are:
1. Doesn't adding an image automatically fit it in the 12 grid system?
2. How do I push the 3 icons on top to the right of the navigation bar (i.e to the right of the column)?
Thanks a ton guys! I'm grateful for any advise or suggestions in advance.
I think the jumbotron class is formatted purposely to reach the edges of the page.
If I am understanding your question correctly in that you do not want the jumbotron to extend to the edge of the screen, you may want to Place the jumbotron inside the div class="container" as W3CSchools suggests
Bootstrap v3 is neat because it has already created tools like the nav bar. You could try using an using the "< nav >" tag and an unordered list like so:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--- image of your logo -->
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
Hi guys im making a website with Bootstrap and CodeIgniter, now im designing the news page with 2 side nav-list and I have a problem.
When I put a long text on the nav-list, the text comes out. Please help me.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"></div>
<div class="span2">
<ul class="nav nav-list well">
<div class="row-fluid">
<li class="nav-header">Suggested Users</li>
<li class="span12">
<div class="span4">
<img src="http://i.imgur.com/0YJjVnH.gif" alt="User suggested">
</div>
<div class="span8">
Aezir ssssssssssssssssssssssssssssss
<button class="btn btn-mini btn-info pull-right">Follow</button>
<br>
<strong><small class="pull-right" style="font-size: 9px;">1024 followers</small></strong>
</div>
</li>
</div>
</ul>
</div>
</div>
</div>
The problem here is the length of the word overflowing the container, you can somewhat fix this by adding something like word-wrap: break-word; to that a tag to break the text that overflows out of the container but what I would suggest is to just add enough room for long words around that space. That way you won't have to force the words to break into a new line.