I have integrated a chat bot onto a website which opens on the bottom right side of the screen on click of a button. I just need this bot to automatically fit all mobile/tablet screen devices on click of the button.
Note: I want the bot to occupy the whole screen for mobile/tablets devices.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>
<div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default noBorder">
<div class="panel-heading top-bar chat-heading">
<div class="col-md-8 col-xs-8 noLRP">
<h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>
<!-- <img src="images/chat-logo.png" alt="Dominer" /> -->
</div>
<div class="col-md-4 col-xs-4" style="text-align: right;">
<!-- <span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span>-->
<a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>
<span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span>
</div>
</div>
<div id="response" class="panel-body msg_container_base"></div>
<div id="footdiv" class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />
<span class="input-group-btn">
<button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I would like there to be some space between the two.
Here is a picture of the footer in question on imgur.
I tried to add margin right to the detail-box but it just shifts the HTML form below it. Can anyone help? Thanks in advance.
<footer class="page-footer red">
<div class="container">
<div class="row">
<div id="detail-box" class="col-md-6">
<h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
<p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
<h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
<p>+90 (392) 444 0 433</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
<p>hizmet#kibrisonline.com</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
<p>kurumsal#kibrisonline.com</p>
<h5 class="font-weight-bold">Bizi Takip Edin:</h5>
<span><i class="icons icon-social-instagram footer-icon"></i></span>
<span><i class="icons icon-social-facebook footer-icon"></i></span>
<span><i class="icons icon-social-twitter footer-icon"></i></span>
<span><i class="icons icon-social-linkedin footer-icon"></i></span>
</div>
<div class="col-md-6">
<form action="" class="row">
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
</div>
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
</div>
<div class="col-md-6 py-1">
<input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
</div>
<div class="col-md-6 py-1">
<input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
</div>
<div class="col-md-12 py-1">
<textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
</div>
</form>
<button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>
</div>
</div>
<hr class="border-white" />
<div class="row align-items-center">
<div class="col-4">
<img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
</div>
<div class="col">
<div class="copyright">
<p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Made with <span style="color: #e25555;">♥</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
</div>
</div>
</div>
</div>
Here's a solution using flexbox:
https://codepen.io/anon/pen/QXgyWQ
<div class="container">
<div class="row">
<div class="col-md-5">
<div style="background: blue;">
left
</div>
</div>
<div class="col-md-6 ml-auto">
<div style="background: red;">
left
</div>
</div>
</div>
</div>
You can wrap that section inside a div and set a max-width.
Something like this:
<div id="detail-box" class="col-md-6">
<div class="detail-box-wrapper" style="max-width: 300px;">
<!-- rest of your codes -->
</div>
</div>
You can set the width to 100% on small screen sizes.
div#detail-box {
max-width: calc(50% - 30px) !important;
margin-right: 30px;
}
You can add this css for make margin right you can increase the value i'e 30px as per your need in both the property
example {max-width: calc(50% - 50px) !Important;}
{margin-right:30px;}
I'm teaching myself CSS and I'm a bit stuck with my page layout. I'm trying to get my login form to be right of my slider, but nothing I do works. Here's what my layout looks like right now...
Here is my CSS for the form:
.login-body { background-color: #f1f2f7 }
.form-signin {
max-width: 330px;
//margin: 50px auto 50px;
background: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.form-wrapper { //padding-bottom: 70px }
.login-bg {
margin-top: -40px;
margin-bottom: -50px;
//background-color: #f1f2f7;
}
HTML:
<!-- Sequence Modern Slider -->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>BUSINESS TOOLS</i>
<br>
<i>FOR YOUR</i>
<br>
<i>SUCCESS</i>
</h2>
<p>
<i>Data visualized</i>
<br />
<i>to meet your needs!</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/graph.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>RESPONSIVE VIDEO</i>
<br />
<i>SUPPORT AND</i>
<br />
<i>MANY MORE</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/3.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>USING BEST WEB</i>
</br>
<i>SOLUTIONS WITH</i>
</br>
<i>HTML5/CSS3</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
<br />
<i>veniam omnis </i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/1.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<!--<nav class="da-arrows">
<span class="da-arrows-prev">
</span>
<span class="da-arrows-next">
</span>
</nav>-->
</div>
<!-- Login start -->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Forgot Password?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
<p>or you can sign in via social network</p>
<div class="login-social-link">
<a href="index.html" class="facebook">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a href="index.html" class="twitter">
<i class="fa fa-twitter"></i>
Twitter
</a>
</div>
<div class="registration">
Don't have an account yet?
<a class="" href="registration.html">
Create an account
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</form>
</div>
</div>
</div>
<!-- Login end -->
You could try to give the login form a position: relative tag and then move it to the top by giving it a negative top: property.
If the login form is displayed directly under the slider then you can give top the negative value of the height of the slider and it should work
Design your two parts in separate Div tag.
Give width in percentage and set float property to left
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How to create a printable Twitter-Bootstrap page
(9 answers)
Closed 7 years ago.
I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)
The problem is, I've done a table, that is made full of controls (input fields).
It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.
In the web browser it looks good:print-browser
But, when I want to print it... it breaks: print-printer.
The code, looks like this:
<div class="row">
<div class="col-sm-3 text-center">
<label>Wpisz nazwę leku</label>
</div>
<div class="row col-sm-9">
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<div class="row" ng-repeat="drug in visit.prescribedDrugs">
<div class="col-sm-3">
<select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
ng-model="drug.drugItemId"></select>
</div>
<div class="row col-sm-9">
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose"
class="form-control"
type="text"
ng-model="drug.targetDose"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<p class="input-group ">
<input type="text"
name="PrescribedDrugCalendar"
id="newPrescribedDrugCalendar"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="drug.targetDoseFrom[$index]"
is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
close-text="Zamknij"
placeholder="rrrr-mm-dd"
current-text="Dzisiaj"
clear-text="Wyczyść"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" />
<!--ng-required="true"-->
<span class="input-group-btn hidden-print">
<button class="btn btn-default"
ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-2 text-center">
<input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal">
</div>
<div class="col-sm-1 text-center hidden-print">
<button type="button"
class="btn btn-default text-center"
ng-click="removePrescribedDrug($index)"
ng-disabled="visit.prescribedDrugs.length==1">
<span class="glyphicon glyphicon-minus text-center" aria-hidden="true"></span> Usuń
</button>
</div>
</div>
</div>
And description for it:
I have labelled row:
Wpisz nazwę leku
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
And control row: which goes like:
Input field (select)
Input field (integer)
Input field (integer - activity based on buisness logic)
Calendar
Checkbox
Remove item button - it's hidden print.
But, it won't print as rows - instead of it creates as many rows, as many controls.
Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing.
In the index page I have:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.
Edit: Also - how to delete this little cursor on input fields, fe. This -> http://imgur.com/dFMVKQY
did you tried adding a print stylesheet ?
<link rel="stylesheet" type="text/css" media="print" href="print.css">
More info.
I'm using Bootstrap 3. I wish to prevent Bootstrap from changing the styling of the page when the width goes below 768px. The reason is that Bootstrap will stack div rows on top of each other and I don't want that.
Here's what I did:
#media (max-width : 768px) {
.container {
width: 800px;
}
}
It successfully set the container width to 800px but it didn't prevent the styling of the container from being changed (i.e. the elements are still being stacked).
HTML:
<div class="container">
<div class="clearfix inbox-panel row">
<div class="convo-panel col-md-5 col-sm-5 col-xs-5">
<div class="clearfix panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">Inbox</li>
<li role="presentation">Sent</li>
</ul>
</div>
<!-- List group -->
<ul class="convo-list list-group">
<div class="push"></div>
</ul>
<div class="convo-footer">
<div class="convo-features">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="edit-convo-button btn btn-default">Edit</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="mark-all-read-button btn btn-default">Mark all as read</button>
</div>
</div>
</div>
<div class="convo-options">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="mark-read-button btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
Mark as read
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="delete-convo-button btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
Delete
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="cancel-button btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix chat-panel col-md-7 col-sm-7">
<div class="clearfix chat-header row">
<div class="sender-chat-photo col-lg-1 col-md-1 col-xs-2">
<img class="img-circle" src="/images/no_photo_thumb.png">
<div class="online-indicator"></div>
</div>
<div class="sender-chat-info col-lg-8 col-md-7 col-xs-5">
<p class="truncate list-group-item-heading sender-name">
<span class="vip-label label label-default"></span>
</p>
<p class="truncate small list-group-item-text sender-location"></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-5">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options </span>
</button>
<ul class="dropdown-menu">
<li>Block user</li>
<li role="separator" class="divider"></li>
<li>Report user</li>
<li role="separator" class="divider"></li>
<li>Delete conversation</li>
</ul>
</div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
<div class="clearfix chat-box">
</div>
<div class="clearfix chat-input-panel">
<div class="clearfix row">
<div class="chat-input-form col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 form-group">
<textarea class="form-control" rows="4" id="chat-input" placeholder="Type your message here..."><%= current_user.token %></textarea>
<button type="button" class="chat-input-button btn btn-default">Send</button>
<div id="clear" style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="/javascripts/chat.js"></script>
<script>
startChat('<%= current_user.token %>');
</script>
You will chase your tail forever with the method you've tried. Presuming you're not using SASS or LESS where you can set variables before the Bootstrap CSS is generated, try using the Bootstrap Customizer. Go to customizer's breakpoints section and set the #screen-sm variable to a lower value like 650px.