I am working on designing the layout a site which currently looks like this Site snapshot
However, currently sub-elements on page have irregulars height. Can you please suggest any tutorial or approach for such problems?
Using Bootstrap framework and responsive design.
UPDATE:
I know that I can write it this way:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="column col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div class="element col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
But I don't know how to add elements to columns properly?
Should I measure hight of elements in JS and then append them to columns?
To have the same result just split the page un 3 divs of equal size and add others divs in these columns for the article.
Something like :
#column {
width: 30℅;
display: inline-block;
}
#article {
width: 100℅;
}
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 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>
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>
I'm finding a solution. When the user lands on the page scroll down normally when the main page scroll ends I have a fixed height footer with scroll bar. I want to scroll the fixed height footer to the end without the taking the mouse on the section. Using Bootstrap but this feature is completely different.
Hide the scrolling bar of the fixed height footer
Scroll the content to the bottom with mouse scroll no matter if the user mouse is on the section or not.
Reset the footer position to the top when the user scroll the main page.
Here is the image to clear the understanding.
Image link
<div id="sidebar">
<div id="scroller">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="Callus">Call Us <span>+56465454</span>
</p>
</div>
<!-- col-md-3 -->
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="share">Share
</p>
</div>
<!-- col-md-3 -->
<div class="col-md-6 col-sm-12 col-xs-12 no-gutter">
<div class="col-md-3 col-sm-12 col-xs-12">
<p class="course">Get Our Free Course</p>
</div>
<!-- col-md-3 -->
<div class="col-md-9 col-sm-12 col-xs-12 no-gutter">
<div class="col-md-9 col-sm-8 col-xs-12 no-gutter">
<div class="form-group">
<input type="email" class="form-control newsletter" placeholder="Email address">
</div>
<!-- form-group -->
</div>
<!-- col-md-9 -->
<div class="col-md-3 col-sm-4 col-xs-12">
<button type="submit" class="btn btn-default outlineSubmit">Sign Up</button>
</div>
<!-- col-md-3 -->
</div>
<!-- col-md-9 -->
</div>
<!-- col-md-6 -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr />
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 FooterForm">
<div class="col-md-8 col-sm-8 col-xs-12 no-gutter">
<h4>Say Hello</h4>
<div class="footerForm form-style" id="contact_form">
<div id="contact_results"></div>
<div id="contact_body">
<div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
<input type="text" name="name" id="name" required="true" class="input-field form-control footerFields" placeholder="Name"/>
<input type="text" name="surname" id="surname" required="true" class="input-field form-control footerFields" placeholder="Surname"/>
<input type="email" name="email" required="true" class="input-field form-control footerFields" placeholder="Email"/>
</div><!-- col-md-6 -->
<div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
<textarea name="message" id="message" class="textarea-field form-control" required="true" rows="3"></textarea>
<input type="submit" id="submit_btn" value="Submit" class="btn outlineSubmit2" />
</div><!-- col-md-6 -->
</div><!-- contact_body -->
</div><!-- contact_form -->
</div><!-- col-md-8 -->
<div class="col-md-3 col-sm-3 col-xs-12 customRight">
<h4>Sitename</h4>
<p class="address">Address</p>
<h4>Twitter</h4>
<p class="address"><i class="fa fa-twitter"></i> #twitter
</p>
</div>
<!-- col-md-3 -->
</div>
<!-- col-md-12 -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
<p class="copyright">COPYRIGHT 2015 ARTIOS. All rights reserved.</p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
<div id="top-link-block" class="goTop pull-right">
<a href="#top" class="linkup" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
<i class="fa fa-angle-up"></i>
</a>
</div><!-- top-link-block -->
</div>
</div><!-- col-md-12 -->
</div><!-- row -->
</div><!-- container -->
</div><!-- footer -->
</div>
</div>
CSS
#sidebar{
float: left;
width: 100%;
height: 300px;
border: 0px solid #000;
overflow: hidden;
}
#scroller{
float: left;
width: 101%;
height: 300px;
overflow: scroll;
}
1) Take a look at the accepted answer to this question.
2) Look into programatically setting the focus to your footer after the user reaches the bottom of the main content - .focus() More Info on focus
3) jQuery has a method called scrollTop() which you could look into using on the footer once the focus switches back to the main content. More Info on scrollTop