I have an issue in IPAD browsers(Chrome and Safari) like when i click on dropdown menu the values are hiding inside the table section.
Here i am attaching the image .
I have used z-index attribute but still the issue is not fixed.
Here is my code for Table
<div class="table-responsive">
<table class="table table-striped m-b-none text-small b-b" id="eventListTable">
<thead>
<tr>
<th style="width:2% !important;"></th>
<th width="15%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="30%"></th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
Code for table data <td> and dropdown is inside the table.:
<td> <input type='checkbox' id='eventCheckBox' value=''></td>
<td width="20%" class="wrap-sm"><a class="dropdown-toggle h5"
data-toggle="dropdown" href="#" id="eventName" ></a>
<small class="block"></small>
<h6><span class="label label-info"></span></h6>
</td>
<td width="8%"><h5></h5></td>
<td width="10%"><h5></h5></td>
<td width="9%"><h5></h5></td>
<td width="12%"><h5></h5></td>
<td width="15%"><h5><small class="label bg-light"></small></h5></td>
<td width="15%"><h5><small class="label bg-light"></small></h5></td>
<td width="10%" align="center" style="padding-top:20px">
<i class="icon-circle text-success"></i></td>
<td style="padding-top:20px;">
<div class="btn-group dropup AttendeeDropDown">
<img src="images/icon-add-attendee.png" alt="Add Attendee" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;"/>
<ul class="dropdown-menu" style="margin-left:-122px;">
<li> Create New Attendee</li>
<li>Add Existing Attendee</li>
<li>Import</li>
<li>Export</li>
</ul>
</div>
Code for dropdown inside the table.
<div class="btn-group dropup AttendeeDropDown">
<img src="images/icon-add-attendee.png" alt="Add Attendee" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;"/>
<ul class="dropdown-menu" style="margin-left:-122px;">
<li> Create New Attendee</li>
<li>Add Existing Attendee</li>
<li>Import</li>
<li>Export</li>
</ul>
</div>
I am using bootstrap.css for my application..
How to show the dropdown over the table is it possible with css or using any script?
Related
I have a table in a bootstrap-5 web page:
<table class="table align-middle table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">TITLE 1</th>
<th scope="col">TITLE 2</th>
<th scope="col">TITLE 3</th>
<th scope="col">TITLE 4</th>
<th scope="col">TITLE 5</th>
<th scope="col">TITLE 6</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Bird</td>
<td>#twitter</td>
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
<td>foo</td>
<td>boo</td>
<td>goo</td>
<td>poo</td>
<td>zoo</td>
</tr>
</tbody>
</table>
In small screens it looks good:
But in a wider screen there is a strange wide column for the text box:
How to fix it, and make the text box column to be same width as the other columns?
Fairly self explanatory, you have a div around that input field that is setting a column size:
<td><div class="col-12 col-md-3"><input type="text" class="form-control form-control-sm" placeholder="sum"></div></td>
Simply remove it and the column will scale with the rest of the table:
<td><input type="text" class="form-control form-control-sm" placeholder="sum"></td>
EDIT:
Something like this would set a fixed width for all table columns:
td {
width: 10%;
}
I am trying to show product items when button order detail is pressed, but its not working in any way I tried, it's possible to make it work with bootstrap 5 or I have to do it with javascript ?
Useless information for "It looks like your post is mostly code; please add some more details." : In the first foreach I am displaying information from the order, then the second foreach is retrieving product id and quantity from a different table that contain order id and the third foreach is getting product where id from the second foreach in order to display product details
<table class="table border">
<thead>
<tr>
<th class="h4" style="width: 18%">Order Number</th>
<th class="h4">Date</th>
<th class="h4">Total</th>
<th class="h4">Status</th>
<th class="h4"></th>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($order as $row_order) {
$order_status = intval($row_order->status);
?>
<td class="fw-bold">{{ $row_order->id }}</td>
<td class="fw-bold">{{ $row_order->added_on }}</td>
<td class="fw-bold">{{ $row_order->order_total }} $</td>
<td class="fw-bold"><?php if($order_status == 0){ ?>
Not Paid
<?php }elseif ($order_status == 1) { ?>
Paid
<?php }elseif ($order_status == 2) { ?>
Shipped
<?php }elseif ($order_status == 3) { ?>
Delivered
<?php } ?>
</td>
<td></td>
{{-- <td><a class="btn btn-primary" href="">Order Detail</a></td> --}}
<div class="btn-group">
<td>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Order Detail
</button>
</td>
#foreach (\App\Models\Order_product_size_color::where('order_id', '=', $row_order->id)->get() as $order_variant)
#foreach (\App\Models\Product_size_color::where('id', '=', $order_variant->product_size_color_id)->get() as $variant)
<div class="dropdown-menu">
<td class="border-0 p-0 dropdown-item">
<tr>
<td class="border-0"><img class="rounded" src="{{ asset('storage/'. $variant->image1->product_image) }}" alt="" style="width: 80px; height: 90px;"></td>
<td class="fw-bold border-0">{{ $variant->product->product_name }}</td>
<td class="border-0">{{ $order_variant->count }} products</td>
<td class="fw-bold border-0">Size: {{ $variant->size->size_name }}</td>
<td class="fw-bold border-0">Color: {{ $variant->color->color_name }}</td>
<td class="fw-bold border-0">${{ $variant->product->price }}</td>
</tr>
</td>
</div>
#endforeach
#endforeach
</div>
<tr>
<td class="fw-bold">Delivery Address:</td>
<td class="fw-bold">{{ $row_order->address }}</td>
</tr>
</tr>
<?php }//end foreach ?>
</tbody>
</table>
I have a little problem - I build a shopping cart checkout with 4 steps (with stepper and links to partial views).
Now I have to call a special #id (the attribute of tags) from the redirectToAction...
How is this possible?
the thing is - I'm in step 2 (partial view) and call an actionresult, which redirect me to the "main view" - but I have to go to the 2nd or 3rd step.
Is there a way how to handle this?
Tried already to overload the button, so the href call the link and an onclick function() calls the actionresult, but this is not possible
Also tried to give the #id as a route value, but it seems doesn't work...
<script>
function goBack() {
window.history.back();
}
//Initialize tooltips
//$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs .nav-item .active');
var $activeli = $active.parent("li");
$($activeli).next().find('a[data-toggle="tab"]').removeClass("disabled");
$($activeli).next().find('a[data-toggle="tab"]').click();
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs .nav-item .active');
var $activeli = $active.parent("li");
$($activeli).prev().find('a[data-toggle="tab"]').removeClass("disabled");
$($activeli).prev().find('a[data-toggle="tab"]').click();
});
</script>
<form class="form cf">
<div class="wizard">
<!-- ============================================================ NAVIGATION ============================================================ -->
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<!-- ======================================== Schritt 1 - Warenkorb ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1" class="nav-link active navigation">
<span class="round-tab">
<i class="fa fa-lg fa-shopping-cart"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2" class="nav-link navigation disabled" id="schritt">
<span class="round-tab">
<i class="fa fa-lg fa-calendar-check-o"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 3 - Rechnung- und Lieferadresse ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3" class="nav-link navigation disabled">
<span class="round-tab">
<i class="fa fa-lg fa-address-card-o"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 4 - Bezahlmöglichkeit ========================================
<li role="presentation" class="nav-item">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4" class="nav-link disabled">
<span class="round-tab">
<i class="fa fa-lg fa-money"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 5 - Abschluss ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4" class="nav-link disabled navigation">
<span class="round-tab">
<i class="fa fa-check"></i>
</span>
</a>
</li>
</ul>
</div>
<!-- ============================================================ CONTENT ============================================================ -->
<!-- ======================================== Schritt 1 - Warenkorb ======================================== -->
<div class="tab-content ">
<div class="tab-pane active text-center " role="tabpanel" id="step1">
<h2>Warenkorb</h2>
<div class="row">
</div>
#if (Model.VmWarenkorbIndexListe.Count == 0)
{
<br />
<br />
<h1 class="text-center">Leider haben Sie noch keine Bücher im Warenkorb :-(</h1>
<br />
<h2 class="text-center">Hier können Sie nach Büchern suchen :-)</h2>
}
else
{
<div class="container">
<table id="cart" class="table table-hover table-condensed ">
<thead>
<tr>
<th></th>
<th style="width:40%" class="h4 text-left">#Html.DisplayName("Titel")</th>
<th class="text-center h5" style="width:3%">#Html.DisplayName("Ausgabe")</th>
<th class="text-center h5" style="width: 20%">#Html.DisplayName("ISBN")</th>
<th class="text-center h5" style="width:10%">#Html.DisplayName("Preis")</th>
<th class="text-center h5">#Html.DisplayName("Anzahl")</th>
<th class="text-center h5">#Html.DisplayName("Zeilenpreis")</th>
<th></th>
</tr>
</thead>
<tbody class="border-bottom">
#foreach (var buch in Model.VmWarenkorbIndexListe)
{
<tr>
<td data-th="Bild" class="zoom">
<img src="#buch.BildPfad" alt="#buch.BildAltText" width="70" onclick="location.href = '#(Url.Action("Detail", "Buch", new { buchId = buch.Id }))'" />
</td>
<td data-th="Buch" class="align-middle" data-toggle="tooltip" data-placement="bottom" title="Für Beschreibung bitte klicken">
<h6 class="nomargin text-left" data-toggle="collapse" data-target="#buch">#buch.Titel</h6>
<p class="collapse" id="buch">Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet.</p>
</td>
<td data-th="Ausgabe" class="text-center align-middle h6">#buch.Ausgabe</td>
<td data-th="ISBN" class="text-center align-middle h6">#buch.Isbn</td>
<td data-th="Preis" class="text-center align-middle h6">#buch.PreisProTag.ToString("F2") €</td>
<td data-th="Anzahl" class="text-center align-middle h6">#buch.Anzahl</td>
<td data-th="Zeilenpreis" class="text-right align-middle h6">#buch.ZeilenPreisProTag.ToString("F2") €</td>
<td class="actions align-middle" data-th="">
<a class="btn btn-outline-danger " href="/Warenkorb/Entfernen?buchId=#buch.Id&anzahl=1" role="button" aria-expanded="false">
<i class="fa fa-lg fa-minus-square"></i>
</a>
<a class="btn btn-danger " href="/Warenkorb/Entfernen?buchId=#buch.Id&anzahl=#buch.Anzahl" role="button" aria-expanded="false">
<i class="fa fa-lg fa-cart-arrow-down"></i>
</a>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td class="hidden-xs"><strong class="h4 text-primary">Gesamtpreis </strong></td>
<td class="hidden-xs text-right"><strong class="h4 text-primary"> #Model.VmWarenkorbIndexListe.Sum(s => s.ZeilenPreisProTag).ToString("F2") €</strong></td>
<td></td>
</tr>
<tr>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
<td> <a onclick="goBack()" class="btn btn-warning "><i class="fa fa-angle-left"></i> Weiter einkaufen</a></td>
<td colspan="6"></td>
<td class="wizard-inner">
Jetzt Bestellen <i class="fa fa-angle-right"></i>
</td>
</tr>
</tfoot>
</table>
</div>
}
</div>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
#Html.Partial("_Bestellen", Model)
<!-- ======================================== Schritt 3 - Rechnung- und Lieferadresse ======================================== -->
#Html.Partial("_Rechnungsdaten", Model)
<!-- ======================================== Schritt 4 - Bezahlmöglichkeit ========================================
<div class="tab-pane" role="tabpanel" id="step4">
<h1 class="text-md-center">Step 4</h1>
<div class="row">
</div>
<ul class="list-inline text-md-center">
<li><button type="button" class="btn btn-lg btn-common next-step next-button">Next Step</button></li>
</ul>
</div>
-->
#Html.Partial("_Danke")
</div>
</div>
</form>
here is the Main View
and here is a partial view
<div class="tab-pane text-center" role="tabpanel" id="step2">
<h2>Ihre Bestellung </h2>
<div class="row">
#using (Html.BeginForm("Bestellen", "Warenkorb", FormMethod.Post))
{
<div class="container">
<div></div>
<table id="cart" class="table table-hover table-condensed ">
<thead>
<tr>
<th style="width:20%" class="h4 text-left">#Html.DisplayName("Titel")</th>
<th class="text-center h5" style="width:20%">#Html.DisplayName("ISBN")</th>
<th class="text-left h5" style="width: 20%">#Html.DisplayName("Autoren")</th>
<th class="text-center h5" style="width: 5%">#Html.DisplayName("Ausgabe")</th>
<th class="text-center h5">#Html.DisplayName("Anzahl")</th>
<th class="text-center h5">#Html.DisplayName("Zeilenpreis")</th>
<th class="text-center h5">
#Html.DisplayName("Rückgabedatum")
</th>
</tr>
</thead>
<tbody class="border-bottom">
#foreach (var buch in Model.VmBestellen.Warenkorb)
{
<tr>
<td data-th="Buch" class="align-middle">
<h6 class="nomargin text-left">#buch.Titel</h6>
</td>
<td data-th="ISBN" class="text-center align-middle h6">#buch.ISBN</td>
<td data-th="Autoren" class="align-middle h6">
#foreach (var autor in buch.Autoren)
{
<span>#autor<br /></span>
}
</td>
<td data-th="Ausgabe" class="text-center align-middle h6">#buch.Ausgabe</td>
<td data-th="Anzahl" class="text-center align-middle h6">#buch.Anzahl</td>
<td data-th="Zeilenpreis" class="text-right align-middle h6">#buch.ZeilenPreisProTagNetto.ToString("F2") €</td>
<td data-th="Datum">
#Html.EditorFor(model => model.VmBestellen.RueckgabeDatum, new { htmlAttributes = new { #type = "date", #name = "rueckgabedatum", #value = Model.VmBestellen.RueckgabeDatum.ToString("dd.MM.yyyy"), #class = "form-control" } })
#Html.ValidationMessageFor(model => model.VmBestellen.RueckgabeDatum, "", new { #class = "text-danger" })
<button type="submit" formmethod="get"> Datum ändern</button>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h5 ">Preis <strong class="h6">(exkl. Mwst)</strong> </strong></td>
<td class="hidden-xs text-right"><strong class="h5 "> #Model.VmBestellen.Warenkorb.Sum(s => s.ZeilenPreisProTagNetto).ToString("F2") €</strong></td>
<td class="hidden-xs"> <strong class="h5">Beginn: <bdi class="text-primary">#DateTime.Now.ToShortDateString() </bdi></strong></td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h6 ">Rabatt </strong></td>
<td class="hidden-xs text-right"><strong class="h6 "> - Rabatt -</strong></td>
<td class="hidden-xs"><strong class="h5">Ende: <bdi class="text-primary ">#Model.VmBestellen.RueckgabeDatum.ToShortDateString() </bdi></strong></td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h6 ">Mwst </strong></td>
<td class="hidden-xs text-right"><strong class="h6 "> #Model.VmBestellen.MwstBetrag.ToString("F2") €</strong></td>
<td class="hidden-xs"><strong class="h5"> Tage Gesamt: <bdi class="text-primary">XX</bdi> </strong> </td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h4 text-primary">Preis <strong class="h6 text-primary">(inkl. Mwst)</strong> </strong></td>
<td class="hidden-xs text-right"><strong class="h4 text-primary"> #Model.VmBestellen.GesamtpreisBrutto.ToString("F2") €</strong></td>
<td></td>
</tr>
<tr>
<!-- ======================================== Schritt 3 - Abschluss ========================================-->
<td > <a onclick="goBack()" class="btn btn-warning btn-block "><i class="fa fa-angle-left"></i> Zurück zum Warenkorb</a></td>
<td colspan="5"></td>
<td class="wizard-inner">
Bestellung abschließen <i class="fa fa-angle-right"></i>
</td>
</tr>
</tfoot>
</table>
</div>
}
</div>
</div>
here is the a href - which calls at the moment only a link - but i would need to call the link AND with the same click call an POST-ActionResult
i thought i could call the POST ActionResult and from there Redirect to a specific #id
I want to expand and collapse table row using Bootstrap Accordion.
Currently, if I click on any row, it expands and collapse. But what I want is that, if I click on second row then first row should collapse if it is expanded then and so on.
<div class=" panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr>
<td class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td id="AA_#(item.Id)" class="accordion-body collapse">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</td>
</tr>
}
</table>
</div>
I researched my problem on SO and found one solution provided by #tmg on here. Many thanks to #tmg. I followed the same in my scenario and it worked for me.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<td>
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="AA_#(item.Id)">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</div>
</td>
</tr>
}
</table>
</div>
And added JQuery to collapse and toggle table row
$('.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
Added Style for hiddenRow
.hiddenRow {
padding: 0 !important;
}
I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first #Html.Raw(item.D) and #Html.Raw(item.B).
What i want is that, if i click on 2nd row then its respective #Html.Raw(item.D) and #Html.Raw(item.B) should displayed and so on.
Please suggest me where I am going wrong.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores#(item.id)">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores#(item.id)">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
updated : data-target="#12345-cores#(item.id) & id="12345-cores#(item.id)"