I need some help building a bootstrap Angular UI modal. This is what I have so far, but I am pretty sure it is wrong. Any assistance would be good. This actually appears to be doing mostly bootstrap stuff. It was originally jquery, but I figured out the hard way that jquery does not mix with Angular Js well. <div id="excelModal" modal="excelModal" close="cancel()" hidden> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" hidden>&times;</button> <h4 class="modal-title">Excel Upload</h4> </div> <div class="modal-body"> <p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p> </div> …

Member Avatar
Member Avatar
+0 forum 1

Hello, I am trying to resize image with bootstrap. Can anyone help me explain this phenomena: https://getbootstrap.com/docs/4.0/content/images/ ? I am trying to resize the image on cell phone into smaller one with the same proportion. I thought this code will be successful: chicken.php <!DOCTYPE html> <html> <head> <title>ABL Home</title> <link href= "styles.css" rel="stylesheet" type="text/css" media="screen"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="custom.css"> </head> <center><img src="images/Logo.jpg"></center> <hr> <br> <?php include('nav.php'); ?> <center><img src="images/Slide_Chicken.jpg" class="img-fluid" alt="Responsive image"><br><br> The the code on the bottom. Why the image does not resize as I wish? It …

Member Avatar
+0 forum 0

Hello, I am having a problem here. I have two version of navigation that I have created: one for pc and the other one is for cell phone. I have to leave the viewport setting like this: <meta name="viewport" content="width=1280"> if I change it like this: <meta name="viewport" content="width=device-width, initial-scale=1.0"> everything will be out of proportion. The only thing that I want to change is the navigation. How the system could decide whether this is a pc or a cell phone and choose the right navigation ? Anyclue? I heard my friend mention using js or jquery - user agent …

Member Avatar
Member Avatar
+0 forum 3

Also cek the bootstrap navigation on cell phone: www.advance-web-studio.com I would like to decrease the height for each navigation item but how? Each navigation item looks too big. Thanks in advance.

Member Avatar
Member Avatar
+0 forum 2

Hello, I place this navigation on the header hoping that on the cell phone the navigation start going mobile navigation. There is one problem, I wonder why this code: @media (max-width: 576px) { is being printed on pc? header.php @media (max-width: 576px) { <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> } </header>

Member Avatar
Member Avatar
+0 forum 1

Inherited [this page](https://library.kutztown.edu/newsteam), a mashup of an HTML5Up template called [Strongly Typed](https://html5up.net/strongly-typed) trying to work inside our content management system, which runs on Bootstrap. Though we cannot edit the stylesheets bundled with our CMS, we can override via inline declarations & custom page-level CSS; the [page in question](https://library.kutztown.edu/newsteam) has the template's CSS & JS transplanted in. At a viewport width of 736px the two-column layout slims to one column, but at the same time the photo carousel "disappears." Or it seems to: in browser's developer console I see that what's really happening is the box balloons in size to a …

Member Avatar
Member Avatar
+0 forum 2

Hello, (i don't really know any specific bootstrap forum which might be better for asking about it but i like daniweb anyway), I am trying to modify a bootstrap snippet to what i need but I am having a little trouble. If you look at the attached images, what i have is the first pic but what i want is the second pic where the images are side by side. [The link to the bootsnip](https://bootsnipp.com/snippets/p1ZDe) ![1.JPG](/attachments/large/4/342fa04ae15ed53f473b9bac4b9b647b.JPG "align-center") ![2.JPG](/attachments/large/4/cc0a9dd4acc2fa70de9b6ced4d62df4a.JPG "align-center") i tried to check the specific css file for this but nothing, unless i somehow messed up the whole code along …

Member Avatar
Member Avatar
+0 forum 1

Cek this code : @section('content') <div id="page"> <div class="container"> <section id="container" v-show="visiblePage"> <div class="row"> <div class="col-sm-4"> <img src="{{url('')}}/images/binder.png"> </div> <div class="col-sm-4" style="background-color: #f8f8f8; height: auto;"> <br> <ul class="b"> @foreach( $pages as $p) <li><a href="{{url('')}}/home/pages/{{ $p->id }}">{{ $p->pages_name }}</a><br> @endforeach </ul> </div> <div class="col-sm-4" style="background-color: white; height: auto;"> <center><b>{{ $pages2->pages_title }}</b></center><br> {!! $pages2->pages_content !!} </div> </section> </div> @endsection I expect that the height will be 600px on "pc only" and auto on mobile, but how? <div class="col-sm-4" style="background-color: #f8f8f8; height: auto;"> Right now, it adjust the color according to the text which makes the colorful container looks shrink.

Member Avatar
Member Avatar
+0 forum 1

I'm developing some kind of web application simillar to forum. I want to show comments under which it belongs to. I currently used bootstrap, php, mysql for this. Here I post my code.... <div class="col-md-7"> <div class="col-md-12"> <form action="insert_post.php" method="post"> <div class="input-group"> <p><b>You Are Posting As : </b></p><h4><span class="label label-default"><?php echo $_SESSION['username'] ?></span></h4> <textarea class="form-control" rows="2" cols="100" name="postcomment"></textarea> </div><br> <div class="input-group"> <button type="submit" class="btn btn-success btn-sm" name="btn_post">Upload</button> <button type="reset" class="btn btn-danger btn-sm">Clear</button> </div> </form> </div> <div class="col-md-12"> <font size="4"><span class="label label-default">Your Most Recent Posts : </span></font> <?php echo '<div class="container-fluid">'; //echo '<table>'; while($row=mysqli_fetch_array($result)) { $post_id=$row['post_id']; $result2= mysqli_query($con,"SELECT * FROM `comment` …

Member Avatar
Member Avatar
+0 forum 1

<pre> hi every one I am working on vs 2012 and mvc 4 ,just small project , i need to apply theme( http://all-free-download.com/free-website-templates/download/magic_city_template_2087.html ) and remove default one ,can any one help me how to do this ?? </pre>

Member Avatar
Member Avatar
-1 forum 1

I am trying to get the add button to enable if I select a valid file otherwise disable it. Also i'm trying to show messages if an invalid file is selected. The code below doesn't not seem to generate the desired result: <form name="myForm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add Image</h4> </div> <div class="modal-body"> <!-- <table class="table table-responsive table-hover table-condensed"> --> <div class='row'> <div class="form-group"> <div class="col-sm-10"> <input type="file" class="form-control-file" ng-file-select="onFileSelect($files)" ngf-accept="'.jpg,.png'" ngf-pattern="'.jpg,.png'" ngf-max-size="'500KB'" name="img" id="img" ng-model="product.filename" required> <div ng-messages="myForm.img.$error && myForm.img.$touched" ng-show="myForm.img.$dirty" style="color:red"> <div ng-message="maxSize"><p>Image is to large, it must be smaller than 10 Mb</p></div> <!-- <div ng-message="minSize"><p>Image is …

Member Avatar
+0 forum 0

I tested over and over and it seems there is something conflicting between these 2 scripts: bootstrap toggle and jquery validator. If I remove data-toggle=" toggle" the checkbox is required for validation, otherwise it just passes regardless of being checked or not! <form id="regiration_form" action="action.php" method="post"> <h1></h1> <fieldset> <h2>Pasul 1: Sa facem cunostinta!</h2> <h1></h1> <div class="form-group"> <label for="nume"><i class='fa fa-id-card-o'></i> Nume</label> <input type="text" class="form-control" id="nume" name="nume" placeholder="ex: Ion Popescu"> </div> <div class="form-group"> <label for="email"><i class='fa fa-envelope-o'></i> Adresa E-Mail</label> <input type="email" class="form-control" id="email" name="email" placeholder="ex: exemplu@domeniu.ro"> </div> <div class="form-group"> <label for="companie"><i class='fa fa-cog'></i> Companie</label> <input type="text" class="form-control" id="companie" name="companie" placeholder="ex: SC …

Member Avatar
+0 forum 0

I am using easyUI datagrid component and I'm trying to add bootstrap dropdown menu in a datagrid cell. The problem is when I click the dropdown button, the menu doesn't show. When moving the menu outside the cell, or remove the cell 'datagrid-cell' class, it works fine. No console errors shown. Here is the current HTML: <div style="height:auto;" class="datagrid-cell undefined"> <div class="select-grid-item-container"> <div class="select-grid-row select-grid-row-item options-active"> <div class="select-grid-options-dropdown"> <span class="select-grid-options" data-toggle="dropdown">Options</span> <ul class="dropdown-menu" role="menu"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#" class="send-email">Send Email</a> </li> </ul> </div> </div> </div> </div> Not sure if you any other details/code. Please do let me know …

Member Avatar
+0 forum 0

I have a problem with bootstrap design i want to make a very simple page which will contain two buttons and a video. The prob. is i dont know how to align theese two buttons with the video in one row here is the code i have: <body> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-offset-2 text-center"> <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> </div> </div> </div> </body> here is an example how i want to look [CLICK HERE ](http://imgur.com/a/JHF5I) **EDIT** At the moment the arrows are up and below the video Thank …

Member Avatar
Member Avatar
+0 forum 20

The code below opens a modal window successfully. When I attempt to open the modal window after closing it, my browser window freezes. To unfreeze I press the escape button on my keyboard. Employee.php <div class="modal-footer"> <button type="button" class="btn btn-secondary" ng-click="closeEmployee()" data-dismiss="modal">Close</button> </div> EmployeeModalController.js <div class="modal-footer"> <button type="button" class="btn btn-secondary" ng-click="closeEmployee()" data-dismiss="modal">Close</button> </div> EmployeeModalController.js scope.closeEmployee = function(){ scope.$dismiss('cancel'); } EmployeeMainController.js scope.viewEmployee = function(val){ scope.theModal = $uibModal.open({ animation: false, scope: scope, templateUrl: '../assets/templates/modal/Employee.php', controller: 'EmployeeModalController', size: '', backdrop: 'static', resolve: { empId: function () { return val; } } }).result.catch(function(res) { if (!(res === 'cancel' || res === 'escape key press')) …

Member Avatar
Member Avatar
+0 forum 1

Is there an easy way to modify Twitter Bootstrap so that all of its responsive columns work based off of the device-width as opposed to responding to the dimensions of the browser window?

Member Avatar
Member Avatar
+0 forum 2

Hello all Every one has seen gmail shows small blocks of files and documents preview and when we click on that then we can read it online on full page as gmail or google drive shows.Is there any library for doing such things.I aslo need to diable download and print option in that>plz help with this.I am stuck here. Thanks All

Member Avatar
Member Avatar
+0 forum 4

I have scenario where one user can refer two codes to other one will become right and other left.Now this right can have two child left and right and so on same for left child user.... So this is binary tree like strucutre so i am selecting a user from database which current login user now binary tree will be displayed.I have coloumn in database which is postion which will have value left or right.So for current login user there will be rows returned one is left and other right now i want to continue to process this thing till …

Member Avatar
Member Avatar
+0 forum 1

Here is my HTML Code: <div class="container"> <div class="row db-padding-btm db-attached"> <div class="col-xs-12 col-sm-3 col-md-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> <sup>$</sup>99 <small>per quarter</small> </div> <div class="type"> BASIC PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-two popular"> <div class="price"> <sup>$</sup>199 <small>per quarter</small> </div> <div class="type"> MEDIUM PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" …

Member Avatar
Member Avatar
+0 forum 1

Hello i have a problem putting margin between the images i have this html code <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Featured Posts</h2> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> </div> <div class="col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> …

Member Avatar
Member Avatar
+0 forum 12

hello friends i'm using the boostrap menu for my website it was fine until i wanted to get menu element from database so u got the syntax error unexpected '<' in line 3 and the line 5, 6, 7, 9, 10, are shown red in my IDE i gues if i solve the line 3 i will get the same message for that lines too ! <?php while($row=mysqli_fetch_array($sqldonee, MYSQLI_ASSOC)){ <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One …

Member Avatar
Member Avatar
+0 forum 4

I'm trying to design a landing page for my API product, and it seriously is lacking any images. Where are the best places to get those Photoshop-ready backdrops that all of the paid themes seem to have? Deviant Art? Looking for ones that are optimized for this sorta thing, and will easily accept some large font writing on them while still being readable.

Member Avatar
Member Avatar
+0 forum 4

I'v got this code to make a bootstrap navbar <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" id="logo" href="#">picturecamel</a> <ul class="nav pull-left"> <li><a href="/">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="change-password">Change password</a></li> <li><a href="update-email-address">Change Email</a></li> </ul> </li> <li><a href="logout">Logout</a></li> <li><a href="help">Help</a></li> </ul> </div> </div> </div> </div> I want to make the help link on the right hand side of the navbar. I've tried applying the class of pull right but that doesn't work. Any suggestions?

Member Avatar
Member Avatar
+0 forum 10

Hi, I need help with the attendance form (index.php). When I tried to update the first row, nothing happened. For the last row, the message says, "**We couldn't update the attendance form at this time.**" Please check lines 96 and 101 to see if got any error. And also I need help with the healthcheck form (healthcheck.php). The tabs (healthcheck, illness, and remarks) are not working when I tried to click. And also when I tried to update the data, nothing happened. The php files are using bootstrap. Download the attendance from zip file: https://drive.google.com/file/d/0B07_pOHhTox3ZTBoTHF1VlpIMVU/view?usp=sharing Inside there is the database …

Member Avatar
Member Avatar
+0 forum 11

Hi, i am in need of urgent help. I have created a web template using bootstrap. I have created a "collapseble" nav bar and used "parallax, jquery single page nav" to scroll on the same page smoothly.This worked fine. There is no problem in it. After that according to the requirement i have used "affix" to have a div on top of the menu bar. suddenly my nav bar when collapsed (i mean on mobile devices) not working properly. It is showing a strange behavior. When nav bar got collapsed for the first time when the page gets loaded if …

Member Avatar
+0 forum 0

Hello guys i want to make inputbox which will autocomplete the started word so you know what i mean like google, facebook who have autocomplete but i have a little problem i have searched and found some plugins and tutorials but actually none of them work i dont know why, maybe its because my old code i would like someone take a look at my code and tell me if is there some bad code which stops the autocomplete. <script type="text/javascript"> $(document).ready(function(){ $('input.typeahead').typeahead({ name: 'accounts', local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'] }); }); </script> …

Member Avatar
Member Avatar
-1 forum 9

![CRM_2016-03-17_13-29-30.png](/attachments/large/3/3db294eb9c3a9a7b7b1bee7032293307.png "align-center") I am appending bootstrap chosen drop-down on button click, the javascript is not triggering that why it is showing simple multiple select. $(document).on('click', '#more_provisions_button', function () { console.log('Incre : '+i); $("#provision_div").append("<p class='par'><div class='form-group' style='clear:both'><div class='col-sm-6 mr-bottom'><select name='provision_month[]' id='day' class='chosen-select input-md' style='width:500px;'><option value='January'>January</option><option value='February'>February</option><option value='March'>March</option><option value='April'>April</option><option value='May'>May</option><option value='June'>June</option><option value='July'>July</option><option value='August'>August</option><option value='September'>September</option><option value='October'>October</option><option value='November'>November</option><option value='December'>December</option></select></div><div class='col-sm-4 mr-bottom'><select required name='provision_day[]' multiple='' id='ass_letter_date' class='chosen-select input-md' style='width:500px;'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option><option value='29'>29</option><option value='30'>30</option><option value='31'>31</option></select></div></div></p>"); i++; return false; });

Member Avatar
Member Avatar
+0 forum 1

On our site we have a "News and Information" section at the top of our landing page. Right now it looks like this: ![news.PNG](/attachments/large/2/edb1aaabb260ba04b597c3a2f4a351b3.PNG "align-center") I'd like to change this to look something like the image below, but I'm having a hard time figuring out how to do this, or if it's even possible? I am using bootstrap CSS as much as possible, but I don't see anything like this in their documentation. Any thoughts or ideas would be GREATLY appreciated! ![news3.png](/attachments/large/2/5832e2c5b5d674c5e3381f713a77bd4e.png "align-center")

Member Avatar
Member Avatar
+0 forum 5

Hello, my bootstrap right panel cannot switching well. when i click #food link, it show the item, and when i click #drink link, it still ok to show the item, but, when i want to click #food link again, it doesnt work. Can anyone help me? <div class="panel-body"> <ul class="nav nav-pills nav-stacked category-menu"> <li > <a>Foods <span class="badge pull-right"><?php echo $size1;?></span></a> <ul> <li><a data-toggle="pill" href="#food">Lunch Set</a></li> <li><a data-toggle="pill" href="#chicken">Chicken</a></li> </ul> </li> <li> <a>Drinks <span class="badge pull-right"><?php echo $size2;?></span></a> <ul> <li><a data-toggle="pill" href="#drink">Juice</a></li> </ul> </li> </ul> </div> <div class="tab-content"> <div id="Home" class="tab-pane active">Some stuff.</div> <div id="food" class="tab-pane"> aa </div> <div id="chicken" …

Member Avatar
Member Avatar
+0 forum 1

Hi I am trying to update the ON / OFF status through the below code. If i change the OFF status to ON, its getting a value is OFF. can any one please help to fix the issue. **toggle.php** <div id="setQuickVar1"> <input type="checkbox" data-switchery <?php if($SCYQ64EV01=='Y') echo 'checked'; ?> /> </div> <span class="uk-form-help-block"> <div id="resultQuickVar1"></div> </span> <script type="text/javascript"> $(document).ready(function() { $('#setQuickVar1').on('click', function() { var checkStatus = this.checked ? 'ON' : 'OFF'; alert(checkStatus); $.post("engineDBUpdate.php", {"quickVar1a": checkStatus}, function(data) { $('#resultQuickVar1').html(data); }); }); }); </script> **EngineDBUpdate.php** <?php if (isset($_POST['quickVar1a'])) echo $quickVar1a = $_POST['quickVar1a']; ?>

Member Avatar
Member Avatar
+0 forum 3

The End.