I am constructing a div on the fly using Jquery, and appending it to the body or any element.
after appending, when i try to get get the height it gives 0. In Chrome i checked all its height property its 0. what could be the problem.
This is my code to append :
var template = '<div class="capMainSection">
<div class="CAP"> </div>
<div class="scrolldiv repeatSection" style="display:none;"">
<div class="header sectionheader"> </div>
<div class="content">
<div class="leftColumn">
<div class="show" id="capInfo">
<div class="label1">CA Contacts:</div>
<div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div>
<div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>
</div>
<div class="hidden" id="facInfo">
<div class="label1"><span class="facid"></span><span class="facName"></span></div>
<div class="label2"><span class="city"></span><span class="state"></span><span
class="country"></span></div>
</div> </div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<p><span class="protocolname show"></span>
<span class="date_class show"></span></p>
</div>
<div class="statusClass hidden"></div>
<div class="approvedFinding show"></div>
<div class="closedFinding show"></div>
<div class="verifiedFinding show"></div>
<div class="lasActivity show"></div>
</div>
<div class="linkButton">
<input type="button" class="lplinkbutton" value=">">
</div>
</div>
</div>
</div>
</div>';
i am cloning the div first then appending
templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));
css
.content {
clear: both;
font-size: 13px;
}
.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}
.rightColumn {
float: right;
width: 50%;
padding: 0;
}
Try this:
.capMainSection {overflow: hidden;}
Or, you can do this:
.capMainSection:after {
content: " ";
display: block;
clear: both;
}
Related
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I have to build a Modular Window for a chat! I allready got a Toolbar and an Flex conatiner which gets filled. Now i got the Problem, that i want to add an Div for a chat input field. I tried nearly everything to align this thing to the bottom but nothing works.
Here is how it should look like:
"Message input" has to be aligned to the bottom
This is my actual HTML-Code:
<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden">
<div class="toolbar_standard">
<div class="toolbar_standard_control_row">
<img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog">
<div style="font-size: 20px; color: white">Chat</div>
<div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div>
<div style="..."></div>
</div>
</div>
<div style="display:flex; height: 100%;">
<div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;">
<div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)">
<div>
<div>
<p data-bind="html: name"></p>
</div>
</div>
</div>
</div>
<div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px">
<div style="height: 80%; display: flex; flex-direction: column;">
<div id="spinner" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px">
<p data-bind="html: message, css: messageClassName"></p>
</div>
<div style="height: auto">
<div class="input-field col s6" style="background-color: white; height: auto;">
<input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;">
<a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a>
<label for="message_to_send">Nachricht</label>
</div>
</div>
</div>
</div>
</div>
</div>
And this is how it looks like in the Browser:
Here you can see that is is floating under the Div of the "Messages" and that its dynamically moving whit the size of the "Messages" Div!
How and where do i have to set the the alignment to the bottom?
First point: Don't use inline CSS without any necessity.
You can bring your message to bottom by positioning. Try to change your code as below
Add position:relative to <div style="height: 80%; display: flex; flex-direction: column;"> and add position:absolute; bottom:0; to <div style="height: auto">.
Edit: If it doesn't bring your message to exact bottom, then you are suppose to work on the height of <div style="height: 80%; display: flex; flex-direction: column;"> on this part.
Just add position: absolute; and bottom: 0px; in your textarea or container of textarea
Add position: fixed; and bottom:0; to your message input container, to fix the width overlap issue just add property of width: inherit; that will take the width value of parent element.
Otherwise you can assign the parent width to your message container dynamically using JavaScript code :
$(document).ready(()=> {
var parentWidth = $('.parent-element').width();
$('.message-container').width(parentWidth);
});
I want to make cards which are responsive but not fixed. What changes should I make to CSS so that it change change their sizes accordingly.
Here is the fiddle link for this Working Fiddle
The cars should change its size with resizing window however the position of the button should be at the bottom only, and in spite of content, size of all cards should be same.
CARD.HTML
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
CARD.CSS
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
I believe all you need to do is change the card's width to min-width. This will force the card to be 100% width until 230px. As you can see in my altered version of your JSFiddle.
What you should keep in mind is your card content is broken down into rows of content. Each row looks like it should be 100% width of the card, therefore you don't need to actually apply a width to the content, just provide display: block. This will force it to be 100% width of it's parent. With content being 100% width of it's parent it's flexibility will always be dependent on the parent. Thus you can set the parents width to 100%, 50%, 200px whatever, the content will always follow.
Let me know if you need me to clarify anything :)
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
min-width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
I'm trying to add a class to an element using jQuery. If the user clicks on an element it adds a class, which I can do, but I want only 1 instance of that class to be active so if the user clicks on something else that class is then removed from the previous element and added to the current one.
https://jsfiddle.net/gsuxjce2/3/
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
</div>
.col {
width: 25%;
float: left;
}
.box {
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
}
.added {
background-color: blue;
}
$('.box').click(function() {
$(this).toggleClass('added');
if ( $(this).hasClass('added'); ) {
$(this).removeClass('added');
} else {
$(this).toggleClass('added');
}
});
Remove the .added class from all .box elements first, then just add it to the one clicked on with this:
$('.box').click(function() {
$('.box').removeClass('added');
$(this).addClass('added');
});
$('.box').click(function() {
$('.box').removeClass('added');
$(this).addClass('added');
});
.col {
width: 25%;
float: left;
}
.box {
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
}
.added {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
</div>
$('.added').removeClass('added');
inside your click event before everything.
Just add this to the start of you click event:
jQuery(".added").each(function(i,el){
jQuery(el).removeClass("added")
});
This removes all instances of the class, so that when you add one new, then that will be unique.
I want to make an HTML page that contains a box at the top and a certain number of boxes being dynamically generated using jquery, the number of boxes at the bottom of top box can be 4 at max.
I want to align these boxes dynamically and symmetrically in the html page. I am using angularjs's ng-repeat to generate boxes. I want the sizes of the boxes to remain same but arrange them symmetrically on the html page.
currently i am using angular js to dynamically create boxes and align them using col-md class of bootstrap. but this makes the size of boxes to change when the number of boxes change.
html code
<div id="header-wrapper" class="container vscrolling_container">
<div id="header" class="container vscrolling_container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<ul>
<li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
<p style="text-align: left">{{missioncontent.info}}</p>
</li>
</ul>
</div>
</div>
</div>
java script code
'use strict';
var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);
mission_vision_mod.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/mission_vision', {
templateUrl: 'partials/mission_vision/mission_vision.html',
controller: 'mission_visionCtrl'
});
}]);
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
I have created a quick jsfiddle
HTML Content:
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
<br/><br/><br/>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
Related CSS:
.container div {
height: 100px;
}
.header {
border: 1px solid black;
width: 75%;
margin: 5px auto;
}
.content {
text-align: center;
}
.contentBox {
border: 1px solid black;
width: 20%;
display: inline-block;
box-sizing: border-box;
}
Caution: I have used plain CSS for this demo.
Hope this helps you.
flexbox can do this
.wrap {
width: 80%;
margin: auto;
border: 1px solid black;
margin-bottom: 25px;
}
.top,
.item {
width: 100px;
height: 50px;
background: red;
}
.top {
display: inline-block;
}
.flex {
display: flex;
justify-content: space-around;
}
<div class="wrap">
<div class="flex">
<div class="top"></div>
</div>
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
JSfiddle Demo