For some reason, my dropdown in my FORM is not working; nothing happens when it is clicked. I also find it strange because I copied this code from somewhere else, and it isn't working. I have checked for typos multiple times but came up with nothing.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>My Awesome Login Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #60a3bc !important;
}
.user_card {
height: 430px;
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #f39c12;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 1px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
top: -75px;
border-radius: 50%;
background: #60a3bc;
padding: 10px;
text-align: center;
}
.brand_logo {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid white;
}
.form_container {
margin-top: 5px;
}
.login_btn {
width: 100%;
background: #c0392b !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #c0392b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #c0392b !important;
}
</style>
</head>
<!--Coded with love by Mutiullah Samim-->
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center form_container">
<form>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="" class="form-control input_user" value="" placeholder="username">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
</div>
<input type="email" name="" class="form-control input_user" value="" placeholder="email.">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="" class="form-control input_pass" value="" placeholder="password">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-flag"></i></span>
</div>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Country.
</button>
***
/*HERE IS THE PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEMPROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM*/
------------------------------------------------------------------------
***
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-genderless"></i></span>
</div>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Gender
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Male</a>
<a class="dropdown-item" href="#">Female</a>
</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<button type="button" name="button" class="btn login_btn">Sign Up</button>
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Already have an account? Login.
</div>
<div class="d-flex justify-content-center links">
Forgot your password?
</div>
</div>
</div>
</div>
</div>
</body>
</html>
According to the Bootstrap introduction, you will need to include the the popper.js script for some bootstrap feature like dropdown, tooltip, etc. to work.
Here is the script you need to include:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
On a side note, you seem to have imported the jQuery script twice, please consider removing one of them.
Related
I have a dropdown in card header i need that to be in top right corner how do i set that in my header.I need welcome message in right side of the card header as below image its beside the title
What I did:-
I added a classes to .card (of bootstrap) with CSS properties of display: "flex" justify-content: "space-between" and flex-direction: row
reference:- https://getbootstrap.com/docs/4.0/utilities/flex/
Style:-
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: lightblue;
}
</style>
Html:-
<div class="container-fluid" style="padding-top: 50px">
<div class="card d-flex flex-row justify-content-between">
<div
class="card-header text-center"
style="font-family: Sans-Serif; text-transform: uppercase; font-size: 1.5rem"
>
Project Manager Dashboard
</div>
<div class="btn-group dropleft">
<button
type="button"
class="btn btn-outline-secondary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Hi, Drake
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a href="{% url 'logout_view' %}"
><button class="dropdown-item" type="button">Logout</button></a
>
</div>
</div>
</div>
</div>
snip
To set it in the top-right corner just use the align property this would align the element to the right.
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Project Manager Dashboard
<div class="btn-group dropright" align="right" >
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Log</button>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hi, Drake
</button>
</div>
</div>
I want to try to make a div page with an icon around the text and button but it won't make an icon beside the text just like this(It also affects the button). I already tried using Flex documentation d-flex justify-content-around in div class but it doesn't work. I'm using Bootstrap 4. Here's the result :
The Result:
The Result I wanted:
Here's the coding :
Home.html
div.page {
padding: 10px 20px;
background: #FDFDFD;
width: 280px;
height: 180px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 32px;
}
p.page {
color: #252525;
margin-left: 20px;
font-size: 30px;
font-weight: bold;
font-family: 'Roboto',sans-serif;
}
button.show {
border-radius: 32px;
font-weight:bold;
margin-right: 80px;
margin-top: 30px;
border: 3px solid #3379E4;
text-align:center;
padding: 5px;
background: #3379E4;
width: 50%;
color: #FDFDFD;
font-family:'Roboto', sans-serif;
}
i.page {
font-size: 36px;
color: #3379E4;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container mt-5">
<div class="row">
<div class="col text-center">
<div class="d-flex">
<div class="page mr-auto p-2">
<i class="page fas fa-calculator text-right"></i>
<p class="page text-left">AK</p>
<button class="show">Show</button>
</div>
<div class="page p-2">
<i class="page fas fa-laptop text-right"></i>
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2016/09/18/14/21/swimmer-1678307__340.jpg" class="img-fluid" width="500">
<div class="d-flex">
<div class="page mr-auto p-2">
<i class="page fas fa-store text-right"></i>
<p class="page text-left">PM</p>
<button class="show">Show</button>
</div>
</div>
</div>
</div>
</div>
Thank you for helping.
I add custom css that you could see by the bottom of the css:
/**** CSS ADDED ****/
.img-fluid {
margin: -10vh auto;
}
.z-index-1{
z-index:1;
}
I recommand to not use class: .img-fluid as I did but to create another class with this negative margin. Here it is really just for the demo
Then I added classes in follow:
<div class="col text-center">
<div class="d-flex">
To make it like:
<div class="col text-center d-flex flex-column">
<div class="d-flex z-index-1">
Edit:
Rework structure of your card this way by dividing in 2 cols and some correction in CSS for icon font-size :
<div class="page p-2 row">
<div class="col-8">
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-laptop m-auto"></i>
</div>
</div>
DEMO:
div.page {
padding: 10px 20px;
background: #FDFDFD;
width: 280px;
height: 180px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 32px;
}
p.page {
color: #252525;
margin-left: 20px;
font-size: 30px;
font-weight: bold;
font-family: 'Roboto',sans-serif;
}
button.show {
border-radius: 32px;
font-weight:bold;
margin-right: 80px;
margin-top: 30px;
border: 3px solid #3379E4;
text-align:center;
padding: 5px;
background: #3379E4;
width: 100%; /* CAHNGED FROM 50% TO 100% */
color: #FDFDFD;
font-family:'Roboto', sans-serif;
}
i.page {
font-size: 4em; /* Changed from 36px to 4em */
color: #3379E4;
}
/**** CSS ADDED ****/
.img-fluid {
margin: -10vh auto;
}
.z-index-1{
z-index:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container mt-5">
<div class="row">
<div class="col text-center d-flex flex-column">
<div class="d-flex z-index-1">
<div class="page mr-auto p-2 row">
<div class="col-8">
<p class="page text-left">AK</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-calculator m-auto"></i>
</div>
</div>
<div class="page p-2 row">
<div class="col-8">
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-laptop m-auto"></i>
</div>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2016/09/18/14/21/swimmer-1678307__340.jpg" class="img-fluid" width="500">
<div class="d-flex z-index-1">
<div class="page mr-auto p-2 row">
<div class="col-8">
<p class="page text-left">PM</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-store m-auto"></i>
</div>
</div>
</div>
</div>
</div>
</div>
I'm currently working on a Watch2Gether clone that looks fine on medium and large devices, but once you get to the phone view, everything looks awesome until you scroll left and find a massive whitespace on the right side. I'm not too sure why this is happening, I tried changing the margin and padding on some items which helped with the UI, but there's still a huge whitespace when you scroll which looks really bad. Any idea how to fix this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Description -->
<meta name="description" content="Watch Youtube videos live with your friends, easily, for free!">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.ico">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css" />
<title>Room</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">WatchWithFriends</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create">Create Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<input autocomplete="off" id="paste" name="paste" class="form-control form-control-md"placeholder="Paste Video URL Here" aria-label="Search">
<button id="watch" class="btn btn-outline-success waves-effect" type="submit">Watch</button>
</div>
</nav>
<div class="section">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 main-section">
<h1 id="roomBasic"><span id="name"></span><span id="users"></span></h1>
<div id="player"></div>
</div>
<div class="col-lg-4 col-md-5 col-sm-12">
<div id="chat-holder">
<div id="mario-chat">
<a id="leave" href="/" class="btn btn-primary btn-block btn-lg leave">Leave Room</a>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<form action="" id="chat-form">
<input
type="text"
id="message"
placeholder="Message"
required
autocomplete="off"
class="form-control form-control-lg"
/>
<button class="btn btn-black btn-block" id="send" onclick="reload()">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-md-8">
<h3 id="welcome-room">Welcome to your room!</h3>
<p class="room-info-p">
To invite a friend, just copy the link below. To change their name they
just have to replace the name in the "username" field. Ex:
username=Billy -> username=Ryan. They can also join using the "Join Room" page.
</p>
<div class="input-group mb-3">
<input id="urlInfo" type="text" class="form-control" placeholder="Url">
<div class="input-group-append">
<button onclick="copyUrl()" class="btn btn-md btn-outline-dark m-0 px-3 py-2 z-depth-0 waves-effect" type="button" id="button-addon2">Copy</button>
</div>
</div>
<p class="room-info-p">To play a new video, paste the URL into the form in the navigation bar and press watch!</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>
<%- include('partials/footer') %>
CSS:
/* room page */
#name {
color: #575ed8;
}
#roomBasic {
font-weight: 600;
}
.section {
height: 80vh;
}
#mario-chat {
max-width: 500px;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.05);
border-radius: 2px;
}
#chat-holder {
margin: 11vh 3vh;
}
#chat-window {
height: 50vh;
overflow: auto;
background: #f9f9f9;
}
#sentText {
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#sentText p {
font-size: 1.1rem;
margin-bottom: 0.1px;
}
#feedback p {
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong {
color: #575ed8;
}
#mario-chat input {
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-size: 16px;
}
#send {
background-color: #292b2c;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
}
#player {
margin: 30px 30px;
border: 1px solid #ddd;
height: 62vh;
width: 100%;
}
.main-section h1 {
margin-left: 30px;
margin-top: 20px;
}
.info {
margin: 30px 30px;
}
.leave {
background: #575ed8;
font-size: 18px;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
/* info section */
.info {
height: 50vh;
font-family: "Roboto", sans-serif;
}
#welcome-room {
font-weight: 600;
}
I got the same issue and this meta tag belon helped me :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Or
//from another topic
It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.
from http://getbootstrap.com/css/ :
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.
From : Twitter bootstrap white gap on right side of page
I would like to switch the left box with the right box. I am using the function sortable() from jQuery UI. As you see in my code, it works fine for the numbers of 1 and 2 but not for the boxes to switch them left and right.
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});
.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
.mg-item {
display: inline-block;
}
.mg-item-inner {
display: flex;
}
.mg-item-inner .btn-group .btn .name {
margin-right: 1rem;
}
.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
cursor: -webkit-grab;
cursor: grab;
}
.mg-item-inner .input-group-btn:only-child>.btn {
border-radius: 4px;
}
.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}
.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
margin-left: -1px;
}
.mg-item span.add {
background: transparent;
color: #444;
padding-left: 0;
margin-left: 0;
}
.mg-item span.add:active {
box-shadow: unset;
color: #313131;
}
.mg-item span.add .fa-plus-circle {
opacity: 0;
}
.mg-item:hover span.add .fa-plus-circle {
opacity: 1;
}
/*# sourceMappingURL=mg.css.map */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
<!--STORE NANE -->
<div draggable="true" class="sort-me storename connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
</div>
</div>
<div class="sort-me">
<div class="connectedSortable">
<h1>
1
</h1>
</div>
<div class="connectedSortable">
<H1>2</H1>
</div>
</div>
https://jsfiddle.net/mjc9as5L/
What is the reason that the boxes can not be sorted? Is there a CSS issue maybe?
Try to add flex to your row, it might solve your problem.
.container > .row{
display:flex;
flex-direction:row-reverse;
justify-content:start;
}
I have an HTML/CSS chat that I'm in the process of making work through the WebSocket API, but I'm hitting an issue with Chrome only
(I tested this to work okay in Firefox, Brave, Safari) where the div containing my input field and my send button is just not shown at all on the page.
This is what it looks like in Chrome
And now in other browsers
body {
background: #ddd;
}
a {
text-decoration: none !important;
}
label {
color: rgba(120, 144, 156, 1.0) !important;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: none !important;
box-shadow: 0 0px 0px rgba(120, 144, 156, 1.0) inset, 0 0 0px rgba(120, 144, 156, 0.8);
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(120, 144, 156, 1.0);
color: rgba(120, 144, 156, 1.0);
opacity: 0.9;
box-shadow: 0 0px 0px rgba(120, 144, 156, 1.0) inset, 0 0 10px rgba(120, 144, 156, 0.3);
outline: 0 none;
}
.card::-webkit-scrollbar {
width: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 9px;
background: rgba(96, 125, 139, 0.99);
}
.balon1,
.balon2 {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.balon1 a {
background: #42a5f5;
color: #fff !important;
border-radius: 20px 20px 3px 20px;
display: block;
max-width: 75%;
padding: 7px 13px 7px 13px;
}
.balon1:before {
content: attr(data-is);
position: absolute;
right: 15px;
bottom: -0.8em;
display: block;
font-size: .750rem;
color: rgba(84, 110, 122, 1.0);
}
.balon2 a {
background: #f1f1f1;
color: #000 !important;
border-radius: 20px 20px 20px 3px;
display: block;
max-width: 75%;
padding: 7px 13px 7px 13px;
}
.balon2:before {
content: attr(data-is);
position: absolute;
left: 13px;
bottom: -0.8em;
display: block;
font-size: .750rem;
color: rgba(84, 110, 122, 1.0);
}
.bg-sohbet:before {
content: "";
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=');
opacity: 0.06;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="jumbotron m-0 p-0 bg-transparent">
<div class="row m-0 p-0 position-relative">
<div class="col-12 p-0 m-0 position-absolute" style="right: 0px;">
<div class="card border-0 rounded" style="box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 6px 10px 0 rgba(0, 0, 0, 0.01); overflow: hidden; height: 100vh;">
<div class="card-header p-1 bg-light border border-top-0 border-left-0 border-right-0" style="color: rgba(96, 125, 139,1.0);">
<img class="rounded float-left" style="width: 50px; height: 50px;" src="https://i.pinimg.com/736x/5c/24/69/5c24695df36eee73abfbdd8274085ecd--cute-anime-guys-anime-boys.jpg" />
<h6 class="float-left" style="margin: 0px; margin-left: 10px;"> Yusuf Bulgurcu <i class="fa fa-check text-primary" title="Onaylanmış Hesap!" aria-hidden="true"></i> </br>
<small> İstanbul, TR</small>
</h6>
<div class="dropdown show">
<a id="dropdownMenuLink" data-toggle="dropdown" class="btn btn-sm float-right text-secondary" role="button">
<h5><i class="fa fa-ellipsis-h" title="Ayarlar!" aria-hidden="true"></i>
</h5>
</a>
<div class="dropdown-menu dropdown-menu-right border p-0" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item p-2 text-secondary" href="#"> <i class="fa fa-user m-1" aria-hidden="true"></i> Profile
</a>
<hr class="my-1"></hr>
<a class="dropdown-item p-2 text-secondary" href="#"> <i class="fa fa-trash m-1" aria-hidden="true"></i> Delete </a>
</div>
</div>
</div>
<div class="card bg-sohbet border-0 m-0 p-0" style="height: 100vh;">
<div id="sohbet" class="card border-0 m-0 p-0 position-relative bg-transparent" style="overflow-y: auto; height: 100vh;">
<div class="balon1 p-2 m-0 position-relative" data-is="You - 3:20 pm">
<a class="float-right"> Hey there! What's up? </a>
</div>
<div class="balon2 p-2 m-0 position-relative" data-is="Yusuf - 3:22 pm">
<a class="float-left sohbet2"> Checking out this awesome chat design.. </a>
</div>
<div class="balon1 p-2 m-0 position-relative" data-is="You - 3:23 pm">
<a class="float-right"> Christ, you know who made that? </a>
</div>
<div class="balon2 p-2 m-0 position-relative" data-is="Yusuf - 3:26 pm">
<a class="float-left sohbet2"> Well I can think of only one person capable of this... </a>
</div>
<div class="balon1 p-2 m-0 position-relative" data-is="You - 3:28 pm">
<a class="float-right"> Oh no it can't </a>
</div>
<div class="balon2 p-2 m-0 position-relative" data-is="Yusuf - 3:33 pm">
<a class="float-left sohbet2"> Yes, him. </a>
</div>
</div>
</div>
<div class="w-100 card-footer p-0 bg-light border border-bottom-0 border-left-0 border-right-0">
<form class="m-0 p-0" autocomplete="off">
<div class="row m-0 p-0">
<div class="col-9 m-0 p-1">
<input id="text" class="mw-100 border rounded form-control" type="text" name="text" title="Type a message..." placeholder="Type a message..." required>
</div>
<div class="col-3 m-0 p-1">
<button type="button" id="send" class="btn btn-outline-secondary rounded border w-100" title="Gönder!" style="padding-right: 16px;"><i class="fa fa-paper-plane"
aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client#1/dist/sockjs.min.js"></script>
It's because your div containing the #sohbet element has a height of 100vh set and its parent div has overflow:hidden set. Therefore, the form gets pushed out of the divs bounds and is invisble to the user.
Chrome renders your layout correctly, apparently the other browsers seem to be wrong here.
Fix the problem by decreasing the height. You can e.g. calculate the height, if your header and form have a fixed height by using calc
<div style="height: calc(100vh - <HeightOfHeaderAndForm>);"
You can also use flexbox to fill the available space. I recommend you check out this excellent guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Please add this CSS in your code
.card-footer {
position: fixed;
bottom: 0;
}