Bootstrap Help & Support | Experts Exchange

Hi Experts,

I'm having trouble creating a mulitselect Laravel form to show multiple columns. This is my current setup:

Controller:

public function edit($id)
    {
        //

        $user = User::findOrFail($id);
        $assets = Asset::all()->pluck('id', 'asset_name')->toArray();

        return view($_ENV['VIEW_FOLDER_VERSION'] . '/views/users/edit', compact('user', 'assets'));
    }

Open in new window

Blade:

<div class="form-group">
        {{Form::label('assets', 'Assets')}}
        {{Form::select('assets[]', $assets ,null,array('multiple'=>'multiple','name'=>'assets[]','class'=>'form-control'))}}
      </div>

Open in new window

MySQL Table

This is what I see:

Can you please help point me in the right direction?

Thanks,
Ricky

2 Comments

Here's my code:

@foreach($videos as $video)
								<tr>
									<td><a data-toggle="modal" href="#video_player-{{ $video->id }}">{{ $video->title }}</a></td>
									<td style="text-align:center;"><a href="{{ url('/admin/show/video/' .$video->id) }}">edit</a> | <a data-toggle="modal" href="#deletePostModal-{{ $video->id }}">delete</a></td>
								</tr>
							@endforeach

Open in new window

Bottom line: When the user clicks on the title of the video they get a popup that allows them to view the actual file.

I want to incorporate another feature, however, in that when the user hovers over the video title, they get a tooltip that lets them see the thumbnail associated with that file.

I can see how it's done, at least as far as being able to view some simple text like this:

https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

But how do I get two different functionalities to exist side by side with one being activated with a mouseover, the other with a click - both of which, apparently require the "data-toggle" dynamic?

Thanks!

2 Comments

Hi Experts

Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

<div class='row'>

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-8 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-6 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window

Thanks in advance!

7 Comments

Why are my labels not in line with my form elements on this page: https://www.gopherstateevents.com/results/fitness_events/rslts_w_laps.asp?event_id=969

Please and than you!

Bootstrap

2 Comments

Hi Experts

Could you point how to adapt this PHP/ Bootstrap code to correctly format the desired layout?

Accordingly with this code:

@extends('layouts.appinterno')

@section('content')

	<div class='row'>

	{{ csrf_field() }}

  	  	<!--div class="col-xs-12 col-sm-4 col-md-4"-->
        <div class="col-md-10 col-sm-12">
		    <p class="titResumoNoticia">Arquivo de Fotos</p>
		   
     
            @foreach($vitrinesX as $vitrine)

                <section class="row">

                               
                        <div class="col-sm-12 col-md-4">
                            <div class="box-noticias">
                               	<a href="javascript:void(0);" onclick='xxx.vitrine.abrirNoticia({{$vitrine->id}});' >
        	    				{{$vitrine->titulo}}
        	    			    </a>                    
                            </div>
                            
                            	<p id="like" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
				                    <i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $qtdeCurtiu }}</span>
				               	</p>   
                                    
           						<p id="dislike" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 0)">
				                    <i class="fa fa-thumbs-down"></i> <span id="qtdeNaoCurtiu_{{ $vitrine->id }}">{{ $qtdeNaoCurtiu }}</span>
						       </p>       
                        </div>

Open in new window

…

5 Comments

Hi, I'm looking for a Css/Bootstrap (Web Responsive) skeleton for my page.
Please see the following diagram with explanations:

15 Comments

Hi Experts

Could you point how to adjust this PHP/ Bootstrap code to repeat 02 times the same box at the right part the same way it is at the left part?

Accordingly with these pictures:

To:

The code actually in use:

<section class='row'>
	<div class="col-md-12 titulo">Vídeos</div>
    <div class="col-md-12 text-center">
        <a href="/videos">
            <img src="{{ asset('img/img_thumb_video_gadget.jpg') }}" />
        </a>
    </div>
    <div class="col-md-12" style="padding-top: 9px;">
        <a href="/videos">
            ver todos os vídeosXX
        </a>
    </div>

	<script src="{{ asset('js/.../xxx.Noticia.js').'?v='.....) }}" ></script>
<section>

Open in new window

Thanks in advance.

15 Comments

I wanna use a bootstrap data table but i cant get it to work.
this it the code in my header:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>>

Open in new window

What line do i need to add to get bootstarp datatable since the one i have been using does not seem to work.

5 Comments

Question by

ASPDEV

2020-01-10SolvedPrivate

JQuery Phone Format

Hello Experts,

I have a textbox(input) when user enter accept only numbers(digits only) and it should be 10. Once entered we need for format like (123)456-7890. I tried below but not working as expected.
CSHTML

 <input type="text" id="PhoneNumber" name="PhoneNumber" value="" class="form-control" autofocus="autofocus" maxlength="11">
                                <span class="bar" id="ErrMsg" ></span>
                                <label for="PhoneNumber">Phone</label>

Open in new window

$("#PhoneNumber").keypress(function (e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#ErrMsg").html("Digits Only").show();
        return false;
    }
});

$("#PhoneNumber").blur(function (e) {
    phone = $(this).val();
    if (phone.length != 10) {
        $("#ErrMsg").html("Phone number must be 10 digits.").show().fadeOut("slow");
        return false;
    }
    else
        $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

Open in new window

I have couple of issues with the above code, first I did Maxlength 11 then only it's accepting 10 digits and also I get format like this (123)456-0 (since my maxlenght was 11). After changing Maxlength to 14, I still get same issue. Please suggest how can I solve this.

Thanks,
ASPDEV

2 Comments

This is coming from a Bootstrap template that apparently allows you to center some content, but it's not working for me and I don't know why.

Here's the way the page looks currently:

It doesn't look bad, but I want to center the content so it looks more like this:

Here's the code that I've been wrestling with:

<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8 satellite_row">
				<h5>NOMAS<sup>&reg;</sup> International Admin Dashboard</h5>
				To login to the NOMAS<sup>&reg;</sup> International Admin Suite, enter your email and password below, then click on "login."
				<br><br>
				if you run into any issues or questions, contact Bruce Gust at <a href="mailto:bruce@brucegust.com">bruce@brucegust.com</a>.
				<br><br>
				Thanks!
				<br><br>
					<div class="card">
						<!--<div class="card-header">{{ __('Login') }}<br><br></div>-->
						
						<div class="card-body">
							<form method="POST" action="{{ route('login') }}">
								@csrf

								<div class="form-group row">
									<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

									<div class="col-md-6">
										<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

										@error('email')
											<span class="invalid-feedback"

Open in new window

…

Bootstrap

2 Comments

New to Laravel. Going through some tutorials and I'm working with a Bootstrap template. On the "welcome.blade.php" file, there's a section that looks like this:


<section id="intro" class="intro">
<div class="intro-content">
<div class="container">

From what I understand, you're going to use a layout and at one point you'll have a "@yield('content')," which is Blade's way of allowing for content coming from a section called "content."

But I've not found anything in the instructional material that references "id's."

What is the significance of a "section id?"

6 Comments

I am creating a page that I want to be mobile-friendly using bootstrap. Looking for advice, primarily structure and formatting but I will take design advice, on this page before I get to far into it:

https://www.gopherstateevents.com/series/cc_nordic/how_it_works.asp?series_id=24

Thanks!

Bootstrap

2 Comments

Hello,

If you view my menu here on an iPhone or a responsive view.

http://careers.baffinland.com

The menu will slip below the logo and have the dropdown menu fly out to the right. How can I make it locked to its position at top and fly out to the left below the logo? So the hamburger menu will be aligned to the right side of the dropdown menu

9 Comments

Hello,

Currently my responsive menu will appear at 768px, I want to change it to appear at 993 and I cant find it anywhere in my css or bootstrap navwalker code.

http://careers.baffinland.com/

7 Comments

Hi,

How can I say if the dropdown list has been selected then append the value or the text to the textarea box.

I'm using bootstrap dropdown list.

  $("#AppendConditionBtn").click(function () {

            var RangeBoxFrom = $("#RangeBoxFrom").val().length;
            var RangeBoxTo = $("#RangeBoxTo").val().length;
            var GetOperatorSelectValue = $("#OperatorSelect option:selected").val();
            var GetConditionSelectValue = $("#ConditionSelect option:selected").text();
            var GetValueSelectValue = $("#ValueSelect option:selected").val();
            var GetGroupSelectValue = $("#GroupSelect option:selected").text();
            var GetItemsTextAreaValue = $("#ItemsTextArea").val();
            var GetOperatorSelectForRangeValue = $("#OperatorSelectForRange option:selected").val();
            var GetConditionSelectForRangeValue = $("#ConditionSelectForRange option:selected").val();
            var GetValueSelectForRangeValue = $("#ValueSelectForRange option:selected").val();
            var GetRangeBoxFromValue = $("#RangeBoxFrom").val();
            var GetRangeBoxToValue = $("#RangeBoxTo").val();

             if (RangeBoxFrom > 6 || RangeBoxTo > 6) {
                 alert("Range should be less than 6 character");
                 return false;
             }

// Here how can I say if the multiselectbox list has been selected then append the value or text to the "ContidionsAndAttributesTextArea"
otherwise don't append.

Open in new window

…

4 Comments

Ok I know this sounds bizarre but I have a web page that I access on my phone. It has a "submit" button that I need to be very sensitive to the touch, so that the instant I press it, it responds. Sometimes I have to do it multiple times to get it to submit. I assume an app would be better but for now my only option is a web page. Is there any way that I can make this a more "responsive to pressing" submit button than it is now? It is big enough that it is hard to miss.

Thank you!

4 Comments

Hi,

This is driving me crazy and I need your help please.

1. I have a dropdown list that has list such as px, dx....
2. I have another dropdown list that gets populated based on the first dropdown list
so if the user select from the first dropdown list px the second dropdown list should get populated with the list of px codes

the problem is when I inspect the element on the second dropdown list I do see my list getting populated and changing upon a different selection
but the issue is I don't see the changes on the bootstrap dropdown list.

This is what I have:

 $('#GroupSelect').multiselect(getGroupOptions(true));       //If I remove this code and the code below it will work but without the style 

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value',

Open in new window

…

13 Comments

Hi,

I have a dropdown list on my partial view dialog box

If I remove the class from the <select> and remove the multiselect

my data will get populated but I need to have my style and populate my data

so if I remove from my select this class:
class="btn btn-default dropdown-toggle"
and
remove the multselect function:
// $('#GroupSelect').multiselect(getGroupOptions(true));

then my select box will get populated but I need my style
how can I have my style and populate my dropdown list?

<script >
    $(document).ready(function () {

        $('#GroupSelect').multiselect(getGroupOptions(true));


   function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'
               
            }
        }


        $("#ConditionSelect").change(function (event) {
           // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method,

Open in new window

…

15 Comments

I am a little inexperienced with console error messages. How can I resolve "You have 3 errors on your page uncaught SyntaxError: Unexpected token '<'" on this page: https://www.gopherstateevents.com/results/cc_rslts/relay_rslts.asp?meet_id=637&race_id=3175

Thank you!

2 Comments

Can someone explain why the "Display By" list on https://www.gopherstateevents.com/results/cc_rslts/relay_rslts.asp?race_id=3040&display_by=school is not displaying horizontally please?

Thanks!

Bootstrap

1 Comment

I have an HTML5 bootstrap website that has a video as the background on the home page.

The problem is if that I maximize the screen the video remains smaller. It's not responsive.
How can I make it responsive so that the video gets bigger if the screen gets bigger (I know the quality may be impacted but I am OK with that)

Here is my current code:

<video autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>

Open in new window

I am just using a sample video from the template.
Also, can we modify the code so that it uses a vimeo video instead?

5 Comments

Is it possible to load the image files in my image folder and create a multiple items carousels with jquery or bootstrap ? Any example or reference,

Is there any recommended image size or ratio for the image showing as the banner of the webpage ?

Thx

1 Comment

Question by

Simon Leung

2019-11-17Solved

Layout

How to add few spacing between the image and the paragraph text ?

Thxtest.php

Bootstrap

2 Comments

Using a form in-line class this scenario has two columns of label text inputs. There are a few that have added input-group-appends with font awesome calendar or search icons. For whatever reason those are shorter than the others. Below is an example with two columns also original has six rows. Also they are centered. I could make the labels right justified by using justify-content-end but not the inputs. It would be nice to left justify these because the gap between the label and the input would be smaller.

<form class="form-inline">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</form>

Open in new window

Bootstrap

5 Comments

In Bootstrap 4, how to put sign up and login reference on Bootstrap right hand side of the navigation bar ? The code below doesn't show up icon, it only show the Sin Up and Login text. Any idea ? Thx

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="home1.png" alt="logo" style="width:40px;">
</a>

<form class="form-inline" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input class="form-control mr-sm-2" type="text" placeholder="All" name="search">
<button class="btn btn-success" type="submit" name="submit">Search</button>
</form>

<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
</li>
</ul>
</nav>

Bootstrap

1 Comment

Bootstrap

Related Topics

Bootstrap

Related Topics