3
I was hoping to put two columns of content on the same Row. However the two columns (col-6) can be shrunk (collapsed), but when I add the class "Collapse", they are displayed vertically. I reproduced the problem in the fiddle: fiddle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-3.1.1.slim.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style id="compiled-css" type="text/css">
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-11">
<form>
<div class="form-row">
<div class="collapse col-12" id="myCollapse1">
<div class="col-6 bg-primary">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" value="John">
</div>
<div class="form-group">
<label>Surename</label>
<input type="text" class="form-control" value="Joseph">
</div>
</div>
<div class="col-6 bg-warning">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" value="[email protected]">
</div>
<div class="form-group">
<label>password</label>
<input type="text" class="form-control" value="jj123">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-1">
<button class="btn btn-primary" data-toggle="collapse" data-target="#myCollapse1" aria-expanded="false">Collapse</button>
</div>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
</script>
</body>
</html>Can anyone help? Thank you in advance
Edit your question and write in Portuguese friend, this is PT.Stackoverflow ;)
– hugocsl
sorry there... edited..
– mTheSame
I’m not sure I understand what the problem is, but if you want both of them together, use this code in the css file linked to your code: . form-group { margin: 0px; padding: 16px; }
– Wanderson Rodrigo
@Wandersonrodrigo guy went to edit jsFiddle to better exemplify the question and I ended up finding the problem! The.o Missing a form-Row before placing the columns!!!
– mTheSame
Hey, just in css da to leave each other side, like this: . form-group { margin: 0px; padding: 16px; } . col-6.bg-Primary{ margin-right: -10; margin-left: 232px; margin-bottom: 100px; position: Absolute; }
– Wanderson Rodrigo
I’m glad you made it!
– Wanderson Rodrigo
@Wandersonrodrigo the problem is that I can not apply the correction in my code. I will try with the solution you gave
– mTheSame
Friend if you have already solved the question the ideal is that you post as Answer, and not as Edition in the question. After that you can accept your own answer. Or if you prefer you can delete the question in this case you lose the points, positive and negative. But the important thing is that if you already have a solution you should post as Answer and not in the Question itself...
– hugocsl
@hugocsl Done!!! Sorry dude, new around here... :/
– mTheSame