bootstrap - keep div fixed on horizontal scroll scroll - javascript

I have some controls at the bottom of the div. I would like these controls to remain fixed when the user scrolls.
I tried:
1) Making the div fixed. The problem with that is that id destroys my bootstrap attributes and also because the height is generated dynamically.
<div id="timelineContainer">
<p class="mes">{{mes1}}</p>
<div id='chart_div' class="chart"></div>
<div class="row fixedcontrols">
<div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg">
<button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records...">
<span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 ">
<button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span>
</button>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 form-group-lg">
<button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button>
</div>
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff">
<button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button>
</div>
<div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right">
<button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
</div>
#timelineContainer {
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap; border: 13px solid #bed5cd;
width: 100%;
margin: 0 auto;
position: relative;
background-color: #5bc0de;
}
Thank you.
Update:
The controls move when user scrolls as shown below. I want them to be fixed.
update: said picture


What i can understand from your question is you want your div at the lower part of page to be fixed in position,
i hope a small change in css will solve your issue
position: fixed !important;
if its not what you meant then can you please explain more !!


set position of controls to absolute and make sure their ancestor is div with id timelineContainer. absolute will position the elements relative to its ancestor. no matter where you move they will be fixed to div.

Related

Circles in a circular shape i.e 6 circles in a circle

Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>

Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%

Bootstrap Modal Does Not Re-Open By Key After Closing

So i currently have the following code for a twitter bootstrap modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-success btn-lg btn-block" id="confirm" data-toggle="modal" data-target="#myModal" style="margin: auto; margin-top: 60px; cursor: pointer;">
Confirm
</button>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-centered w3-animate-bottom" style="max-width: 1000px !important;">
<div class="modal-content" style="border-radius: 10px; padding: 20px;">
<div class="modal-header" style="background-color: white; color: black; text-align: center;">
<h3 style="padding: 8px;"><strong>Confirm Credentials</strong></h3>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
<strong>Borrower ID:</strong>
</div>
<div class="col-sm-5">
</div>
<div class="w-100"></div>
</div>
</div>
<div class="modal-footer" style="background-color: white; color: black;">
<div class="text-center" id="footmsg" style="float: left; text-align: left;">
<p>Are you sure you want to submit?</p>
</div>
<span style="width: 20px;"></span>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button submit" class="btn btn-success" id="submitter" style="cursor: pointer;">Submit</button>
</div>
</div>
</div>
</div>
and I tried to handle the part where I can launch the modal via the enter key by JQuery. This is the code:
$(document).on('keydown', function(event) {
var key=event.which;
if (key==13) {
$('#confirm').click();
}
});
what it basically does is that it clicks the button that is supposed to launch the supposed modal. So I tried it and it worked the first time. However, when I clicked on the buttons inside the modal that would dismiss the modal, upon trying to press enter again, nothing happens. What should I do?

I have solved it. Apparently, based on https://getbootstrap.com/docs/3.3/javascript/ there is a .modal('show') function that gets things done how I wanted it.

Align four buttons evenly stacked with Bootstrap?

I'm trying have have two rows of two buttons stacked on top of each other like below:
[button][button]
[button][button]
These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:
[ Image ]
[button][button]
[button][button]
Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '> Pretty sure I'm not going. </button>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '> It's a maybe. </button>
</div>
</div>
</div>

I know you have accepted an answer already but it doesn't seem to answer your question
First, whatever contains the following code must have text-align:center on it (in the example bootply, I have put this on the body tag).
Second, I have assumed you are using bootstrap because of the classes - this makes no difference but that's why I have done the example in bootply.
Third, wrap all elements in an inline element that has a max width of 100%;
Fourth, make image block and max-width of 100%
4th as your buttons seem to be inline-block elements, you can add box-sizing and 50% width to them and then comment out the space inbetween, then you should achieve what you are after
body {
text-align: center;
}
.image-container {
display: inline-block;
max-width: 100%;
}
.image-container .image {
display: block;
max-width: 100%;
}
button {
width: 50%;
box-sizing: border-box;
}
<div class="image-container">
<img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg">
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info "> Absolutely sure, I'm not going.</button><!--
--><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info "> Pretty sure I'm not going. </button><!--
--></div>
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info "> It's doubtful. </button><!--
--><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info "> It's a maybe. </button><!--
--></div>
</div>
Example bootply
The above is fully responsive up to the max width of the image

Are you expecting result something like this?
You can use bootstrap text-centerclass to make the buttons center
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img class='image center-block col-lg-12 col-xs-12 col-md-12' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12 col-md-12 text-center">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '>Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '>Pretty sure I'm not going.</button>
</div>
<div class="button-box col-lg-12 col-xs-12 text-center">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '>It's doubtful.</button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '>It's a maybe.</button>
</div>
</div>
</div>

Here's my solution:
you can use the grid system of Bootstrap. The idea is that the class "row" spans for the full width of the parent, and then tell each button to stretch for 25% of its parent (col-xs-3). The first button in each row also needs an offset of 25% (col-xs-offset-3).
I recommend to read about the grid system: http://getbootstrap.com/css/#grid
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div >
<div>
<div>
<img class='image center-block img-responsive' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3'> Pretty sure I'm not going. </button>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col col-xs-3'> It's a maybe. </button>
</div>
</div>
</div>

You should take advantage of the Bootstrap grid layout, even for your buttons :)
Example : http://codepen.io/anon/pen/MJoavP
I have made two different buttons rows, so you can check the differences
<div class="container">
<div class="row">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<hr>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-left'> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-right'> Pretty sure I'm not going. </button>
</div>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's a maybe. </button>
</div>
</div>

Add some row classes and then make the buttons their own columns.
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 100%;
max-width: 800px;
font-size: 50px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 100%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<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="row">
<div class="col-lg-12 col-xs-12">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg' width="100%">
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>

If you are using bootstrap then use the grid system to create a simple layour for the buttons:
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- set this to the required width and offset -->
<img class='image' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 1</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 2</button>
</div>
</row>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 3</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 4</button>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid

I tried something for you:
Fiddle:
JSFiddle
HTML:
<div id="img-div" class="col-xs-12">
</div>
<div class="row">
<!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">A</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">B</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">C</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">D</button>
</div>
</div>
</div>
CSS:
.btn {
width: 100%;
}
#img-div
{
width: 100%;
height: 600px;
background-size: cover;
background-image: url('http://i.dailymail.co.uk/i/pix/2013/10/22/article-2471794-18E82E4300000578-360_638x405.jpg');
}

ui-sortable auto scrolls to the bottom of the page

Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?

twitter bootstrap tooltip showed behind modal

I have a tooltip with span inside input-group which is showed in modal popup behind the main modal div..
This is my tooltip inside a form-group
<div class="form-group margin-none innerB">
<label for="form_field_name" class="col-sm-3 control-label">label</label>
<div class="col-md-9">
<div class="input-group">
<input type="text" id="form_field_name" name="form_field_name" class="form-control" value="0" readonly="readonly" />
<span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="tooltip text"><i class="fa fa-question-circle"></i></span>
</div>
</div>
And this is my modal:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<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" id="modalLabel">Modal Title</h4>
</div>
<div class="modal-body">
<div id="modal_body" class="modal-body padding-none">
<div class="lead separator center relativeWrap">
<p class="innerTB margin-none">
<i class="fa fa-fw fa-spinner fa-spin"></i> loading
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
SOLVED
I fixed the problem changing this:
data-container="body"
for:
data-container=".modal-body"

Modals have higher z-index, check out the z-index of it, and give higher then that of to the tooltip. That might solve it

I use tooltip in a label tag if i change z-index it worked. However, label tag has something and it was gone. Just tooltip is showing. Also, I did not use data-container="body"
UPDATE:
I add css file position: fixed;
now, label and tooltip is showing.
.tooltip {
z-index: 100000000 !important;
position: fixed;
}
I changed z-index value according to my situation.

Categories

Resources