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);
});
Related
It is kind of tricky situation I am in now.
I have two templates that need to be displayed based on ng-switch like:
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div ng-switch-default>
<div class="card">
<div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
</div>
So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.
something like a css-grid.
The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.
But now it gets applied to all the divs, like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
How can I fix the same?
you should follow dom structure like this
<div class="summary-card">
<div>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div class="cool-grid">
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
and your css should be something like
.summary-card {
display: flex;
width: 350px
}
.cool-grid {
display: flex;
flex-wrap: wrap;
}
check this out :- https://codepen.io/anon/pen/gzomoN
This is not the complete answer but it will give you some idea
you can also use grid layout if you want
.summary-card {
display: grid;
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 1;
}
.cool-grid {
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 3;
display: inline-grid;
flex-wrap: wrap;
}
I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.
LINK TO PAGE
$(document).ready(function(){
$(".video" ).click(function() {
$(".header").height("+=315");
document.getElementById("video__player").style.maxHeight = "50vw";
document.getElementById("video-btn").style.display = "none";
});
});
.header {height: 100vh; width: 100vw;}
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
<div class="header" id="header">
<div class="header__menu">
<div class="header__menu--left">
<div class="logo">
<img class="logo__full img__full" src="assets/kbd-logo-english.svg">
<img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
</div>
</div>
<div class="header__menu--right">
<div class="phone">
<h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
</div>
<a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
<div class="language">
<h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
</div>
</div>
</div>
<div class="header__content">
<div class="header__content--container animatedParent animateOnce">
<h1>Hi, we're KBD Insurance.</h1>
<br>
<h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
<br><br>
<div class="quote__wrapper header__quote--wrapper">
<a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
</div>
<br><br>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
The margin of .header__content--container is currently set to auto. Change the margin to some hard-coded value like, for example, 300px, and it works like you want it to.
EDIT: the requested function
function setMarginTop() {
const $header = $(".header__content--container");
const marginTop = $header.css("margin-top");
$header.css("margin-top", marginTop);
}
How can I make align all the textboxes align in same vertical position?
My textboxes are starting just after the label is completed. The textboxes are following the width of the label.
It is also to be noted that all the labels are left justified. Can I do this without using tables, just only html and css?
Code ::
<div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Previous Password:</b>
<asp:TextBox ID="txt_prev_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>New Password:</b>
<asp:TextBox ID="txt_new_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Retype Password:</b>
<asp:TextBox ID="txt_re_pwd" runat="server" />
</div>
</div>
</div>
You can add to b tag CSS styles:
b{
display: inline-block;
width: 150px;
}
I recommend change <b> tag on <label>, add a class name, and then style it.
you can use this code:
.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}
<div class="fields">
<div class="fields-row">
<b>Previous Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>New Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>Retype Password:</b>
<input type=text />
</div>
</div>
</div>
Try wrapping each line in a separate div that specifies the width and use the CSS property float, text-align and align
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #1</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
Although Whitcik response is pretty accurate, I would prefeer using relative width:
b{
display: inline-block;
max-width: 75%;
min-Width: 20%;
}
This way, you can test in different widths keeping stable the aspect ratio (mobile devices). This is just ANOTHER solution. Whitcik is completely right with his response ;)
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
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;
}