I have just added a Bootstrap panel which sits above a table of search results - this is my first time working with Panels. The panel includes a form with a select menu - the idea is that users can make selections which will filter the list of search results.
At the moment the panel has the same width as the table and the select menu is also very wide - I would like to reduce the width of the Panel by around 1/3 and have it centred on the page but not sure if this is possible or how to do this.
Here's my HTML for this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="text-center">
<ul class="pagination">
<li class="disabled">First</li>
<li class="disabled">Previous</li>
<li>Next</li>
<li>Last</li>
</ul>
</div>
<div class="text-center">
<span class="counter-items"><span class="counter-num-items">1-20 / 13233</span></span>
</div>
<h1>Search Results</h1>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Filter By</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="filter" action="filter.php" method="get" role="form">
<input type="hidden" name="action" value="filterSearch">
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" name="productType" id="productType">
<option selected="selected">By Product Type</option>
<option value="Cars">Cars</option>
<option value="Trains">Trains</option>
<option value="Planes">Planes</option>
</select>
</div>
</div>
</form>
</div>
</div>
Place your panel inside a div tag with class="col-xs-offset-3 col-xs-6". find below
<div class=" col-xs-offset-3 col-xs-6">
<div class="panel panel-primary">
----
</div>
<div>
If I am correctly understanding you want to center and reduce width of your panel to 1/3.
So you should put an id (panel1) to the panel and add css
<div id ="panel1" class="panel panel-primary">
<style>
#panel1 {
width:30%;
height:auto;
margin:0 auto;
text-align:center;
}
</style>
Seems like you don't want to use Column Layout in your code. All though, it is possible to reduce the width of the panel and place it to the center of the page. You can override bootstrap's default CSS style for Panel. Try to add below code to your HTML file under <head> section:
<style>
#panel-center{
width: 20%;
margin: 0 auto;
}
</style>
Add id = "panel-center" to this line <div class="panel panel-primary">
This would solve your problem, but it is not optimum solution. I would suggest to use Column Layout(Grid).
Thank you.
Related
I have a small question.
What would be the best way to make a sibling push on the last element of said div?
this is the structure:
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
<button>Submit Form</button>
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
</div>
and the CSS (more or less)
form > button {
width: 200px;
margin: auto;
display: block;
margin-bottom: 15px;
position: relative;
right: -54%;
}
Here is an image as an example:
I want the right col-6 div to push on the save button which is in the left col-6, because there are elements of the rightmost div that are being added that start overlapping. How should I go about doing so?
This will do it:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
<div class="col-lg-12 text-center">
<button class="btn btn-default"
onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
</div>
</div>
Notice I moved the button in a new column and I'm using inline Javascript to submit the form when it's pressed.
I am currently developing an TYPO3 Extension for a website.
I am using bootstrap 4 and i have three different parts for the extension.
On web it should look like:
A B
C
and on mobile:
A
B
C
Mobile view is fine with my current approach:
mobile view
A is just a selection picker, B is a Google Map and C are Results.
The columns have different heights.
Currenlty looking like on web
My issue: I don't want Column C to have this much margin. In fact I want it to be just underneath column A.
My code:
<!DOCTYPE html>
<f:layout name="Default" />
<f:section name="main">
<div class="row kleingaerten container">
<select class="selectpicker col-12 col-sm-4" data-header="Wähle einen Bezirk" data-live-search="true">
<option data-tokens="">Alle Bezirke</option>
<f:for each="{bezirke}" as="bezirk">
<option data-tokens="b{bezirk.uid}" >{bezirk.name}</option>
</f:for>
</select>
<div class="col-12 col-sm-8">
<div id="map" style="width:100%; height:400px;" ></div>
</div>
<div class="col-12 col-sm-4">
<f:for each="{kleingaerten}" as="kleingarten">
<div class="card {kleingarten.bezirkClasses} " data-lat="{kleingarten.adresse.breitengrad}" data-lng="{kleingarten.adresse.laengengrad}" data-name="{kleingarten.titel}" data-strasse="{kleingarten.adresse.strasse}" data-hausnummer="{kleingarten.adresse.hausnummer}" data-plz="{kleingarten.adresse.postleitzahl}" data-ort="{kleingarten.adresse.stadt}" data-webauftritt='Kleingarten'
id="g{kleingarten.uid}" data-id="g{kleingarten.uid}"
>
<div class="container">
<h7><b>{kleingarten.titel}</b></h7>
<div>{kleingarten.adresse.strasse} {kleingarten.adresse.hausnummer}</div>
<div>{kleingarten.adresse.postleitzahl}
{kleingarten.adresse.stadt}</div>
Kleingarten
</div>
</div>
</f:for>
</div>
</div>
</f:section>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 col-md-4">
<div>
Part A
</div>
<div>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
Part B <br>
</div>
</div>
<div class="col-12 col-md-8">
Part C (Map part in your app)
</div>
</div>
You don't need to separate as 3 parts.
You can insert A and B into one div like code snippet.
And You need to change
FROM
"col-12 col-sm-8"
"col-12 col-sm-4"
TO
"col-8 col-sm-12"
"col-4 col-sm-12"
Just follow this steps and fiddle or snippet below.(resize screen to check)
Step 1:Make B column first and use bootstrap class .float-md-right
Step 2:Make A column second and add class .order-first(for moving to top
in mobile view)
Step 3:Make C column last.
Wrap 3 columns A,B,C in div and add class .d-flex to make .order class to work and .flex-wrap class to wrap when screen size changes and .d-md-block to override .d-flex and make it work only on mobile devices
https://jsfiddle.net/raj_mutant/9vgL605f/
#map {
background: green;
}
.a-section {
background: yellow;
height: 100px;
}
.c-section {
background: red;
height: 400px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container my-4">
<div class="d-flex d-md-block flex-wrap">
<div class="col-md-8 col-12 float-md-right">
<div id="map" style="width:100%; height:400px;">B</div>
</div>
<div class="col-md-4 order-first">
<div class="a-section">
A
</div>
</div>
<div class="col-md-4">
<div class="c-section">
C
</div>
</div>
</div>
</div>
I'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/></div></div>
<div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
</div>
</div>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.
Try position absolute with push. You can use Z-index to get the correct column on top.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="position: absolute; z-index: 1;">
<div class="loginpart">
<img id ="icon" src="" />
<h2 style="color: grey;">Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/>
</div>
</div>
<div class="col-md-8 col-md-push-4">
<img id="header" src="" />
<div class="mantra">
<h2 style="color: blue;">Go Wolves!</h2>
</div>
</div>
</div>
</div>
Using bootstrap, how can horizontally align components within a panel-heading? In order to have: title : aligned to left, btn1 : centered, btn2 : aligned to the right.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">title</h3>
<button class="btn">btn1</button>
<button class="btn">btn2</button>
</div>
<div class="panel-body">
text
</div>
</div>
</div>
I have tried to create a bootstrap class "row" and columns, but the row goes outside the panel-heading since the panel is inside another col-md-6:
A right way to go with .row and .col is like this
<div class="panel panel-default container-fluid">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
</div>
http://jsfiddle.net/j7u53eav/3
Using Ch.Idea's answer as a jumping-off point, you can add a row class to your panel-heading. However, you do not need to make the panel a container-fluid.
Since the Bootstrap row class adds negative margins, you just need to remove them. Assuming every time a row is added to a panel-heading you would want this behaviour, it's as simple as adding some CSS:
.panel-heading.row {
margin: 0
}
Since columns already have padding, you can take it further by removing the left and right from the row as well:
.panel-heading.row {
margin: 0;
padding-left: 0;
padding-right: 0;
}
And for the sake of thoroughness, a modified copy of Ch.Idea's work:
<div class="panel panel-default">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
<table class="table">
<!-- insert rest of table here -->
</table>
</div>
And a modified jsfiddle showing full-width tables:
http://jsfiddle.net/my7axd1b/3/
After my lack of success with my previous post, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success.
The aim is a page with a sidebar (col-md-3) that contains panels with all unsorted students (in small panels each), and a main area (col-md-9) that contains different groups (larger panels), in which the students can be dragged and dropped with JQeryUI Sortable. This screenshot shows the concept.
This works fine, except for one problem: while the sidebar does not have a horizontal scrollbar (even when selecting "overflow-x: auto"), it seems to become bigger when trying to drag a panel out from it. This screenshot at the moment when I am dragging the fourt panel from above shows the problem.
Here is a streamlined version of the code:
CSS:
<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="unsortedList panel panel-default">
<div class="panel-heading">
Not assigned
</div>
<div class="panel-body">
<ul id="0" class="list-unstyled connectedLists">
<li class="panel panel-primary innerpanel" id="student_1_id">
<input type="hidden" name="student_1_id" value="0">
<div class="panel-body">
Student 1 Name
</div>
</li>
<li class="panel panel-primary innerpanel" id="student_2_id">
<input type="hidden" name="student_2_id" value="0">
<div class="panel-body">
Student 2 Name
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="col-md-4 col-sm-4 col-xs-5" id="panel_1">
<div class="panel panel-default outerpanel">
<div class="panel-heading">
Group 1
</div>
<div class="panel-body">
<ul id="1" class="list-unstyled connectedLists">
<li class="panel panel-primary innerpanel" id="student_3_id">
<input type="hidden" name="student_3_id" value="1">
<div class="panel-body">
Student 3 Name
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-5" id="panel_2">
<div class="panel panel-default outerpanel">
<div class="panel-heading">
Group 2
</div>
<div class="panel-body">
<ul id="2" class="list-unstyled connectedLists">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
The (functioning and simplified) Javascript code:
$(document).ready(function(){
jQuery(function(event, ui) {
$('.connectedLists').sortable({
connectWith: ".connectedLists",
stop: function(event, ui) {
item = ui.item;
var newList = item.closest("ul");
var group = newList.attr('id');
var formField = item.find("input");
formField.val(group);
},
});
});
};
Is there a way I can stop the sidebar from expanding when dragging? Thanks for looking through this mess!
Ok, this is a tricky problem but there's a little bit of 'hack' that we can do. It's a simple method.
To summarize your issue, you need overflow-y:scroll in your container holding the draggable, while you keep overflow-x:hidden. But, when you drag, the element still spreads across the container like as if the overflow-x had no effect. So here's what we do:
1) We describe the overflow-y:scroll property on DOM:
$(document).ready(function(){
$('.sidebar').css('overflow','scroll');
});
We can't put this directly on the CSS because we are going to be changing this value later and the CSS default property overrides it.
2)
$('.panel-body').mousedown(function(){
$('.sidebar').css('overflow-y','');
});
This means, when we select a draggable element (while the mouse is still down), we will hide the vertical scroll, that means both overflow won't be true. This is the important part, we know that removing overflow-y totally solves the issue but we need a vertical scrollbar. So we hide it only when an element is selected.
3)
$('.panel-body').mouseup(function(){
$('.sidebar').css('overflow-y','scroll');
});
Once we have placed the draggable element in the place we wanted it to be, we put our vertical-scrollbar back.
That's it, this may not be a smooth solution since it's only a workaround.
You can have a look at how it works here:
DEMO (updated)