I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>
Related
I have a panel which is divided into 3 section.
When I click on other section then it's background color should change along with its text color and according to it, panel body content should get changed.
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
})
.clicked_section_background_color{
background: #2fabe9;
color:#ffffff;
}
.unclicked_section_background_color{
background: #f5f5f5;
color:#000000;
}
.padding_top_bottom_15{
padding-top:15px;
padding-bottom:15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = !switch_panel"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = !switch_panel"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody">
<span>Show div on compose click</span>
</div>
<div class="panelbody">
<span>Show div on subject click</span>
</div>
<div class="panelbody">
<span>Show div on send click</span>
</div>
</div>
just like in the image
Any help would be great.
thank you.
You could track which one is selected in your scope variable switch_panel , by assigning an Id to every panel:
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = '1'"
ng-class="{clicked_section_background_color : switch_panel == '1', unclicked_section_background_color : switch_panel !='1'}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = '2'"
ng-class="{clicked_section_background_color : switch_panel == '2' , unclicked_section_background_color : switch_panel !='2'}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
Then for your second part:
<div class="panelbody" ng-if="switch_panel=='1'">
<span>Active panel 1</span>
</div>
<div class="panelbody" ng-if="switch_panel=='2'">
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="switch_panel=='3'">
<span>Show div on send click</span>
</div>
Working Sample: https://plnkr.co/edit/0eDZX467y22tDuW7wMef?p=preview
Try something like this:
//Controller
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
$scope.currentTab = 'first';
})
//View
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="currentTab=first"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="currentTab=second"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15" ng-click="currentTab=third">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody" ng-if="currentTab=first"> <-- added ng-if
<span>Show div on compose click</span>
</div>
<div class="panelbody" ng-if="currentTab=second"> <-- added ng-if
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="currentTab=third"> <-- added ng-if
<span>Show div on send click</span>
</div>
I wasn't able to get nth-of-type(2n+1) selector to select odd and even rows in the following example.
What I'd like the nth-of-type selector to do is to provide a different style for the odd rows having class "row-data row-header" and a different style for the odd rows having class "row-data row-content".
I resorted to using jQuery on document load to accomplish this by manually adding an "odd" class to the rows selectively. Is there a better (CSS-only) way of doing this?
function toggleRowContent(cnt) {
$(cnt).parents(".row-header").first().next(".row-cnt").slideToggle("fast");
$(".toggleIcon", $(cnt)).toggleClass("fa-chevron-right");
$(".toggleIcon", $(cnt)).toggleClass("fa-chevron-down");
}
function alternateRowBackgroundColours() {
$(".row-header").each(function(i, e) {
if (i % 2 != 0)
$(this).addClass("odd");
$(".row-content", $(this).next(".row-cnt")).each(function(j, e) {
if (j % 2 != 0)
$(this).addClass("odd");
});
});
}
$(document).ready(function() {
alternateRowBackgroundColours();
});
.row-data {
border-bottom: solid 1px #ccc;
}
.row-cnt {
border: solid 1px #5A82B3;
}
.row-content {
margin: 0 15px;
}
.row-content .col {
padding-top: 5px;
padding-bottom: 5px;
}
.row-header .col {
padding-top: 10px;
padding-bottom: 10px;
}
.row-header .btnToggleContent {
width: 35px;
height: 30px;
}
.row-data.row-header(2n+1) .col {
background-color: #e7e7e7;
}
.row-data.row-content(2n+1) .col {
background-color: #c8ebed;
}
.row-data.row-header.odd .col {
background-color: #e7e7e7;
}
.row-data.row-content.odd .col {
background-color: #c8ebed;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css" />
<div class="container">
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt container" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt container" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
</div>
EDIT: Adding some more detail to my attempt. Check the full working snippet above.
This is my desired CSS:
.row-data.row-header(2n+1) .col { background-color: #e7e7e7; }
.row-data.row-content(2n+1) .col { background-color: #c8ebed; }
But it doesn't work. Using "odd" instead of 2n+1 doesn't make any difference.
So what I did was this:
<script>
function alternateRowBackgroundColours()
{
$(".row-header").each(function (i, e)
{
if (i % 2 != 0)
$(this).addClass("odd");
$(".row-content", $(this).next(".row-cnt")).each(function (j, e)
{
if (i % 2 != 0)
$(this).addClass("odd");
});
});
}
$(document).ready(function ()
{
alternateRowBackgroundColours();
});
</script>
And then I added this CSS:
.row-data.row-header.odd .col { background-color: #e7e7e7; }
.row-data.row-content.odd .col { background-color: #c8ebed; }
The number of row-header(s) and the corresponding row-content(s) is dynamic and there is a toggle button on each row-header which shows the corresponding row-content(s) like an accordion.
This is the result
Since all rows are siblings the use of odd ore even will take in count both headers and contents so you really need for your headers a selector to skip the content rows like this:
.row-header:nth-child(4n+1) {
background:red;
}
And for the intern content just use:
.row-cnt > div:nth-child(odd){
background:#999;
}
Check this snippet:
body {
font-family: sans-serif;
font-size: 14px;
}
.row-cnt > div{
background: #f1f1f1;
padding:3px;
}
.row-cnt > div:nth-child(odd) {
background: #999;
}
.row-header {
color: white;
background: blue;
font-size: 1.5em;
padding: 10px;
}
.row-header:nth-child(4n+1) {
background: red;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 3
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 3.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 3.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 4
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 4.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 4.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 5
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
Use nth-child instead of nth-of-type to target odd numbers locally.
.row.row-data.row-header:nth-child(odd) {
/* your styles here */
}
.row.row-data.row-header:nth-child(odd) {
background: red;
}
.row.row-data.row-content:nth-child(odd) {
background: green;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">icon</i></a>
</div>
</div>
<div class="row row-cnt" style="">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">icon</i></a>
</div>
</div>
<div class="row row-cnt" style="">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
check this code snippet
div.row-data.row-header:nth-of-type(2n+1){
display:block;
background:red;
}
div.row-data.row-content:nth-of-type(2n+1){
display:block;
background:green;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">hello</i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
Hope this helps
It may be more worthwhile to use the odd keyword.
.row-data.row-content:nth-of-type(odd) {
}
I made a sample html page with bootstrap column. In column it's necessary to insert a text (from Firebase) at the specific position.
For example: I want to insert "test" at the column 3.
For that, I create the Firebase with the "currentMessage" field and "location" field.
Until now, I use javascript for save and show information from Firebase. Also, I used in my code AngularJS to show 2 messages (just to learn...).
Here is my index.html code:
<!DOCTYPE html>
<html ng-app="root">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid</title>
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--FOR ANGULAR JS-->
<script src="root.js"></script>
<script src="services.js"></script>
</head>
<!--END ANGULARJS -->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid">
<div class="header">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" > <div ng-controller="Ctrl1"><center>{{message}}</center></div> </div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 blue9" > <div ng-controller="Ctrl2"><center>{{message}}</center></div></div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" ><div ng-controller="Ctrlocation">{{message}}</div></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-9 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
<div class="bottom-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 red12" >
<div id="lblCurrentMessage" class="text-center"></div>
</div></div>
</div>
<br><br>
<div class="form-group">
<input type="text" id="txtNewMessage" cass="form-control">
<button id="btnUpdateMessage" class="btn btn-primary">Add Text</button>
<br><br>
<input type="text" id="txtNewMessage2" cass="form-control">
<button id="btnUpdateLocation" class="btn btn-primary">Add Location</button>
</div>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script>
var lblCurrentMessage = document.getElementById('lblCurrentMessage'),
txtNewMessage = document.getElementById('txtNewMessage'),
txtNewMessage2 = document.getElementById('txtNewMessage2'),
btnUpdateMessage = document.getElementById('btnUpdateMessage');
btnUpdateLocation = document.getElementById('btnUpdateLocation');
rootRef = new Firebase('https://web-quickstart-8326d.firebaseio.com/'),
currentMessageRef = rootRef.child('currentMessage');
locationRef = rootRef.child('location')
btnUpdateMessage.addEventListener('click', function(){
currentMessageRef.set(txtNewMessage.value);
txtNewMessage.value='';
});
btnUpdateLocation.addEventListener('click', function(){
locationRef.set(txtNewMessage2.value);
txtNewMessage2.value='';
});
currentMessageRef.on('value', function(snapshot){
txtNewMessage.value='';
});
currentMessageRef.on('value',function(snapshot){
lblCurrentMessage.innerText = snapshot.val();
});
</script>
<!--AngularJS scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script src="root.js"></script>
<script src="services.js"></script>
<!--END ANGULARJS -->
</body>
</html>
And here is my root files from angular:
var root = angular.module('root', []);
root.controller('Ctrl1', function ($scope)
{
$scope.message = "Eu sunt coloana 3";
});
root.controller('Ctrl2', function ($scope)
{
$scope.message = "Eu sunt coloana9";
});
I need idea/help how can implement this feature. (to insert text, at the specific position in my website).
I think it's necessary to use AngularJS for that, but i'm novice and i don't have idea how can make that.
I tried to make a controller, look like that:
root.controller('Ctrlocation', function($scope){
if($scope.location=txtNewMessage2.value){
$scope.message = txtNewMessage.value='';
}
});
But, didn't work and I don't know exactly where it's necessary to insert ng-controller in my index.
Thank you for help!
I have been trying to stack three div's differently based on desktop, mobile and tablet with out having to duplicate the div's.
It should look like this
Is this possible with pure css?
A javascript answer will be fine if there is no way to do this with css alone.
Here is a fiddle
https://jsfiddle.net/DTcHh/19086/
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-6 col-sm-8 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
Thanks in advance!
If you think "mobile first", use col-*-push/col-*-pull classes like this..
<div class="row">
<div class="col-lg-6 col-lg-push-2 col-sm-8 col-sm-push-4 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-2 col-lg-pull-6 col-sm-4 col-sm-pull-8 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
http://www.codeply.com/go/N8wCdrlkK3
I have three divs inside a 12 col div in a row with a min height set for the desktop view. When the viewer is narrowed, the surrounding div does not stretch to contain the now stacked divs. I know this must be a simple fix but my brain is fighting me! See the Fiddle below and thanks for your help!
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSfiddle
Bootstrap columns make use of the float property and therefore are not counted as block elements.
To fix this issue, you need to add overflow: auto to the containing element like so:
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px; overflow: auto;">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
JSFiddle
Try this http://jsfiddle.net/ok696Lkw/4/
HTML
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div class="row">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content<br>Content<br>Content<br>Content<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content2<br>Content22<br>Content2<br>Content2<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
Content3<br>Content3<br>Content3<br>Content3<br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color: yellow">
<div style="min-height:200px">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content
<br>Content
<br>Content
<br>Content
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content2
<br>Content22
<br>Content2
<br>Content2
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content3
<br>Content3
<br>Content3
<br>Content3
<br>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>