Hello everyone,

I have a firebase database and a html website which I am using to post news related articles and I would like to be able to have the ability to post new articles to firebase and have them populate on the website automatically. The website is only on a CPanel server and is not being generated using a Linux platform.

I also use bootstrap to format the pages and would like the pages to maintain formatting. Any suggestions are appreciated :)

I am having a problem with a portion of my HTML not being responsive.  On a desktop, it looks fine - as pictured here:



and on a small screen, such as a phone, it looks like this:



My HTML - links specifically in the stepWrapper Div

<section class="ls ms section_padding_50">
  <div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <div id="stepWrapper" class="stepWrapper">
                <a id="link-manufacturer" href="/RapidRepair/Manufacturer" class="step ">Manufacturer</a>
                <a id="link-deviceModel" href="#" class="step current">Model</a>
                <a id="link-serviceProvider" href="#" class="step">Service Provider</a>
                <a id="link-repair" href="#" class="step">Repair</a>
                <a id="" href="" class="step">Add-Ons</a>
            </div>
            <div class="topmargin_40">
                <h3 class="topmargin_20 ">What model needs repair?</h3>
                <ul class="rapid">
                    <!-- ko foreach: modelList() -->
                    <li><a href="#" data-bind="click:addDevice"><span data-bind="text:name"></span></a></li>
                    <!-- /ko -->
                </ul>
            </div>
        </div>
    </div>
  </div>
</section>

Select all Open in new window

Here is the style for that Div

 <style>
        .stepWrapper {
            text-align: center;
        }

        .step 

Select all Open in new window

…

I've two following tabs where tab's respective data is paginated. The pagination works OK when I am in the first tab. But when I goto second tab and try to paginate, it takes me to the first tab.

Can you please help me with this, how can I stay in the selected tab while I am going through the pages of that particular tab?

PHP:

<?php
    $first = [];
    for ($i = 1; $i <=25; $i++)
    {
        $first[] = $i;
    }

    $second = [];
    for ($j = 11; $j <=35; $j++)
    {
        $second[] = $j;
    }

function paginate($data)
{
    $totalrows = count($data);
    $perpage = 10;

    $totalpages = ceil($totalrows / $perpage); // total number of pages

    if ($totalpages < 1)
    {
        $totalpages = 1;
    }

    $page = 1;
    if (isset($_GET['page']))
    {
        $page = (int)$_GET['page'];
    }

    if ($page < 1)
    {
        $page = 1;
    }
    elseif ($page > $totalpages)
    {
        $page = $totalpages; // set page to totalpages page number
    }

    $offset = ($page - 1) * $perpage;

    if ($offset < 0)
    {
        $offset = 0;
    }

    $items = array_slice($data, $offset, $perpage);

    $pagination = "";

    if ($totalpages != 1)
    {
        $pagination .= '<ul class="pagination">';
        // first and previous link
        if ($page > 1)
        {
            $previous = $page - 1;
            $pagination .= '<li class="page-item"><a class="page-link" href="' . …

I have the page that show a table and in one of the table cell I show a progress bar implemented in bootstrap. When the page is shown in HTML it works fine . When I convert the page into PDF the progress bars disappears

The below code is not populating dropdown values

<div class="col-md-4">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Select all Open in new window

But the below code is populating dropdown values

<div class="col-md-12">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Select all Open in new window

When I increase the column width of the bootstrap grid from col-md-4 to col-md-12 (which is 3 cells to 1 cell) I am able to populate the drop-down. What would I do to populate the drop-down populated when the grid column width is 4?

I have this

<span id="showSchedule" class="btn btn-default">Test</span>

Select all Open in new window

I want to add a + before "test" --> so the button looks like + Test

This can't be that hard but drawing a blank.

Please see here

https://codepen.io/anon/pen/zaOyby

and scroll down to "Example tab 2 (using standard nav-tabs)"

You see how I have a dropdown, and 2 input boxes. How can I align them? the dropdown is to the left. I want all 3 to be in the center.

Hi,
i am going to start new project.

for that, i want to use some rich web template.

can you pls. suggest me to some sample of the template website which is been using Bootstrap, AngularJS and other Good UI template...?

I am new for Bootstrap..

Hi experts, I am using bootstrap 3
I have a page with 4 dropdown options and 4 number INPUT with different ids (see dropdown 1 below)
How can I add an eventlistener to either the dropdown or number input changes its value ?
What I am trying to accomplish is calculate the price on the fly (ajax and php)
P.S. I can calculate the price IF THE USER CLICKS A BUTTON, but I want to do the same calculations WITHOUT THE USER CLICK THE CALCULATE PRICE BUTTON

Tnx for any help or suggestions


    <div class="form-row">
     <div class="form-group col-sm-5">
        <label for="sel1" class="control-label">Select list :</label>
        <select class="input-large" id="sel1">
          <option value="399">Nativity Set - 399.00&#160;&#160; </option>
          <option value="189">Deer Set - 189.00&#160;&#160; </option>
          <option value="35">Sheep - 35.00&#160;&#160;</option>
          <option value="35">Cow - 35.00&#160;&#160;</option>
          <option value="35">Donkey - 35.00&#160;&#160;</option>
          <option value="35">Goat - 35.00&#160;&#160;</option>
        </select>
     </div>
       
     <div class="form-group">
      <label for="iQ1" class="col-sm-2 control-label">Quantity</label>
      <div class="col-sm-2">
        <input type="number" class="form-control" id="iQ1" value="1">    
      </div>  
     </div>
    </div>

Head out to https://jc-city-lg.ezonlineregistration.net/ and hover your mouse over either "Consultation Appointment" or "Bio-Consultation Appointment" at the bottom of the screen.

If you're looking at it from your desktop and your screen size is 1200px wide or more, you may notice that when you get the tooltip to display, the screen "jerks." I doesn't do that with smaller screen resolutions, but with the larger desktop screens it does and I don't know why.

That's dilemma #1.

The other dilemma is the tooltip itself. Because I'm activating it with a custom div, I want to position the tooltip a little higher than it's default distance from the top so you can see the arrow.

How do you customize the placement of the tooltip beyond "left, right, top or bottom." I've seen that code, but I'm having a hard time nailting down the way in which I can bring the position of the tooltip up about 10px.

What do you think?

I need to find a way to close a scrollable and absolute positioned lightbox popup when a person clicks anywhere outside of the lightbox:

https://staging.royalpalm.com/property/212-alexander-palm-road/

( just click on the large header image up at the top to trigger the lightbox popup )

You'll notice that you can scroll this lightbox popup vertically, and that you can only close it by scrolling back up to the top and then clicking on the "X" in the upper righthand corner.  Ideally, I'd like to change this by doing either of the following:

1) Make is so that if you click anywhere outside of the lightbox to close it (this is the most preferred method)
2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

How would I accomplish either of these?

- Yvan

In bootstrap 4 using a modal dialog there is a problem with the close after clicking cancel or save.  The form has a search input that refreshes the values in each input on the modal.  If this is used and updates the form then it requires to click the cancel or the save button twice to close.  There is also a shift at the bottom of the modal and a gap of white space is added on the first click.  The cancel button uses data-dismiss="modal".  Is there something that is occurring when the search refreshes the values across the entire form that I may not be doing correctly?  Basically on the search click event I simply add the values by using $("#input1").val('new value').

Using Yii2 with a modal Bootstrap and the dosamigos TinyMce will only work on the first call.  I have looked all over the net for the solution and found plenty of people with the issue and they explain that it needs to be initialized.  I have tried and tried, but can't seem to get it to work in my case.  As it stands right now, I can finally get the tinymce to appear in subsequent calls, but the content flash for a second and then the control goes blank and I can't work with it.

My index.php view file  is

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\bootstrap\Modal; //used to make create a popup window
use backend\models\Projects;
/* @var $this yii\web\View */
/* @var $searchModel backend\models\TicketsSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Tickets');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="tickets-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?php // = Html::a(Yii::t('app', 'Create Tickets'), ['create'], ['class' => 'btn btn-success']) ?>
        <?= Html::button('<i class="glyphicon glyphicon-plus"></i> '.Yii::t('app', 'New Ticket'), 
            [
                'id'=>'modalCreateButton',
                'class' => 'btn btn-success modalButton',
                

Select all Open in new window

…