I'm trying to get ui-bootstrap accordion to only trigger (expand) on a div within the accordion-header. I've tried setting the is-open to false but no luck. The idea is that I simply want all kinds of ng-click's on the accordion-header but only one that will expand it.
<accordion-group class="panel-default">
<accordion-heading>
// ****** I'd like this to be one of the things that expands the accordion
<span class="editable">
<span class="glyphicon glyphicon-cloud-download" ></span>
{{product.name}}
</span>
// ****** but not this..
<span class="editable">
<span is-open="false" ng-click="editProduct(item)" class="glyphicon glyphicon-pencil"></span>
</span>
<span class="pull-right" >
<span class="badge access_group" ng-click="fetchMembers(product)" ng-show="product.members_count > 0">
<span class="glyphicon glyphicon-user">
</span>
{{product.members_count}}
</span>
// ****** but this should as well...
<span class="badge access_group editable" ng-click="fetchServiceProducts(product)" ng-show="product.children_products_count > 0">
<span class="glyphicon glyphicon-cloud-download">
</span>
{{product.children_products_count}}
</span>
</span>
</accordion-heading>
{{product.description}}
<accordion>
<div ng-repeat="product in product.products" ng-include="'product_renderer.html'"></div>
</accordion>
</accordion-group>
If there is something I'm missing please let me know.
Related
This is a jump I made using the ActionLink in #Htmlhelper, but my Bootstrap button design turned out like this:
#HTMLAction() button code is:
<button class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
#Html.ActionLink("Edit", "EditForm", "Dashboard", new { id = Model.FormId })
</button>
When I jump with the <a> tag it renders this effect:
HTML markup is:
<button href="/Dashboard/EditForm" class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
<span class="text" id="Edit">Edit</span>
</button>
While I use Htmlhelper to pass values while jumping, I can't achieve such a normal effect anyway.
try this :
<button href="/Dashboard/EditForm" class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-edit"></i>
</span>
<a class="text" href="#Html.ActionLink("Edit", "EditForm", "Dashboard", new { id = Model.FormId })" id="Edit">Edit</a>
</button>
I have a dashboard (MVC Razor + Bootstrap) navigation bar with these labels and badge
<span class="btn btn-danger" style="pointer-events: none;">Alert<span class="badge badge-pill badge-default">#alerts</span></span>
<span class="btn btn-warning" style="pointer-events: none;">Waring<span class="badge badge-pill badge-default">#warning</span></span>
<span class="btn btn-success" style="pointer-events: none;">Normal<span class="badge badge-pill badge-default">#normal</span></span>
I would like that on small screen show only badge. How can I do?
Thanks
use d-none d-md-inline d-lg-inline-bootstrap class name to hide particular elements on small screen.
I hope this is what u r expecting.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<span class="btn btn-danger"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Alert</span><span class="badge badge-pill badge-default">#alerts</span></span>
<span class="btn btn-warning"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Waring</span><span class="badge badge-pill badge-default">#warning</span></span>
<span class="btn btn-success"><span class="d-none d-md-inline d-lg-inline" style="pointer-events: none;">Normal</span><span class="badge badge-pill badge-default">#normal</span></span>
I am strugling with Bootstrap 3 grid system.
Let me explain what I have implemented, what I need and what I did (fail attempt) to achieve.
This is the Layout (HTML | Razor) of the image. For you to have a live version of this This is the site link to this screen so you can see it and play.
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<div id="showcaseSection" class="showcaseSection superVideo">
<ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
</div>
<div class="hidden-xs">
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team1Name (<span id="team1Total">0</span>)</span>
</p>
<ul class="media-list team1ListShowCase" id="#Model.Team1Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="#Model.Team1Name" data-class="team1"></ul>
</div>
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team2Name (<span id="team2Total">0</span>)</span>
</p>
<ul class="media-list team2ListShowCase" id="#Model.Team2Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="#Model.Team2Name" data-class="team2"></ul>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6 nopadding">
<div id="chatcontainer">
<ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>
<div id="chatOptions" class="collapse">
<p class="text-center">#Model.Title</p>
<button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
<span class="glyphicon glyphicon-log-out"></span> #Resources.Salir
</button>
<span>
<input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
<label>Actualizar Mensajes</label>
</span>
</div>
</div>
#if (!Model.IsReadOnly)
{
<div class="input-group">
<input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
<textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
<input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
<span class="input-group-btn">
<button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
<span class="glyphicon glyphicon-send"></span>
</button>
<button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
<span class="fa fa-cogs"></span>
</button>
</span>
</div>
}
</div>
</div>
As you can see everything is in one row.
I want to have the Video Section fixed on top and the TEXT AREA to comment fixed BOTTOM when on XS (viewports).
I tried adding this to the row, but I fix the video but I cannot see the TEXT AREA
.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}
I don't know what else to do to show fixed top (video) and botton fixed (Chat Textbox) and scrollable comments in the middle when in XS.
Any help is welcome.
Override the height for #chatcontainer for tablet/mobile will fix the issue. Example:
#media(max-width: 767px) {
#chatcontainer{
height: calc(50vh - 80px);
}
}
I'm trying to remove the customer invoice address section in my Prestashop 1.6 cart summary page in the customer checkout (see image).
I have a tip that i 'need to comment out/remove the box from addresses.tpl file? in the theme folder. Also that i need to know html, to avoid breaking stuff'.
Ive been busy reading html and php books but have not found what i have to do. I just don't know enough to know what specifically to comment or add or maybe its altogether the wrong file to edit.
Can anyone help please?
Here's the code from my addresses.tpl file:
{capture name=path}
{l s='My account'}
<span class="navigation-pipe">{$navigationPipe}</span>
<span class="navigation_page">{l s='My addresses'}</span>
{/capture}
<h1 class="page-heading">{l s='My addresses'}</h1>
<p>{l s='Please configure your default billing and delivery addresses when placing an order. You may also add additional addresses, which can be useful for sending gifts or receiving an order at your office.'}</p>
{if isset($multipleAddresses) && $multipleAddresses}
<div class="addresses">
<p><strong class="dark">{l s='Your addresses are listed below.'}</strong></p>
<p class="p-indent">{l s='Be sure to update your personal information if it has changed.'}</p>
{assign var="adrs_style" value=$addresses_style}
<div class="bloc_adresses row">
{foreach from=$multipleAddresses item=address name=myLoop}
<div class="col-xs-12 col-sm-6 address">
<ul class="{if $smarty.foreach.myLoop.last}last_item{elseif $smarty.foreach.myLoop.first}first_item{/if}{if $smarty.foreach.myLoop.index % 2} alternate_item{else} item{/if} box">
<li>
<h3 class="page-subheading">{$address.object.alias}</h3>
</li>
{foreach from=$address.ordered name=adr_loop item=pattern}
{assign var=addressKey value=" "|explode:$pattern}
<li>
{foreach from=$addressKey item=key name="word_loop"}
<span {if isset($addresses_style[$key])} class="{$addresses_style[$key]}"{/if}>
{$address.formated[$key|replace:',':'']|escape:'html':'UTF-8'}
</span>
{/foreach}
</li>
{/foreach}
<li class="address_update">
<a class="btn btn-success btn-sm" href="{$link->getPageLink('address', true, null, "id_address={$address.object.id|intval}")|escape:'html':'UTF-8'}" title="{l s='Update'}">
<span>
{l s='Update'}
<i class="fa fa-refresh right"></i>
</span>
</a>
<a class="btn btn-danger btn-sm" href="{$link->getPageLink('address', true, null, "id_address={$address.object.id|intval}&delete")|escape:'html':'UTF-8'}" onclick="return confirm('{l s='Are you sure?' js=1}');" title="{l s='Delete'}">
<span>
{l s='Delete'}
<i class="fa fa-times right"></i>
</span>
</a>
</li>
</ul>
</div>
{if $smarty.foreach.myLoop.index % 2 && !$smarty.foreach.myLoop.last}
</div>
<div class="bloc_adresses row">
{/if}
{/foreach}
</div>
</div>
{else}
<p class="alert alert-warning">{l s='No addresses are available.'}
{l s='Add a new address'}
</p>
{/if}
<div class="clearfix main-page-indent">
<a href="{$link->getPageLink('address', true)|escape:'html':'UTF-8'}" title="{l s='Add an address'}" class="btn btn-default btn-md icon-right">
<span>
{l s='Add a new address'}
</span>
</a>
</div>
<ul class="footer_links clearfix">
<li>
<a class="btn btn-default btn-sm icon-left" href="{$link->getPageLink('my-account', true)|escape:'html':'UTF-8'}" title="{l s='Back to your account'}">
<span>
{l s='Back to your account'}
</span>
</a>
</li>
<li>
<a class="btn btn-default btn-sm icon-left" href="{$base_dir}" title="{l s='Home'}">
<span>
{l s='Home'}
</span>
</a>
</li>
</ul>
The correct file you are looking for is in folder "themes/default-bootstrap" called "shopping-cart.tpl".
And a good solution for you would be this at line 516:
{foreach from=$formattedAddresses key=k item=address}
{if $k eq 'invoice'}
{else}
<div class="col-xs-12 col-sm-6"{if $k == 'delivery' && !$have_non_virtual_products} style="display: none;"{/if}>
<ul class="address {if $address#last}last_item{elseif $address#first}first_item{/if} {if $address#index % 2}alternate_item{else}item{/if} box">
<li>
<h3 class="page-subheading">
{if $k eq 'invoice'}
{l s='Invoice address'}
{elseif $k eq 'delivery' && $delivery->id}
{l s='Delivery address'}
{/if}
{if isset($address.object.alias)}
<span class="address_alias">({$address.object.alias})</span>
{/if}
</h3>
</li>
{foreach $address.ordered as $pattern}
{assign var=addressKey value=" "|explode:$pattern}
{assign var=addedli value=false}
{foreach from=$addressKey item=key name=foo}
{$key_str = $key|regex_replace:AddressFormat::_CLEANING_REGEX_:""}
{if isset($address.formated[$key_str]) && !empty($address.formated[$key_str])}
{if (!$addedli)}
{$addedli = true}
<li><span class="{if isset($addresses_style[$key_str])}{$addresses_style[$key_str]}{/if}">
{/if}
{$address.formated[$key_str]|escape:'html':'UTF-8'}
{/if}
{if ($smarty.foreach.foo.last && $addedli)}
</span></li>
{/if}
{/foreach}
{/foreach}
</ul>
</div>
{/if}
{/foreach}
The solution (or maybe rather hack) to removing the invoice box from the cart summary was to add some code to the blockpermanentlinks.css file.
#block-order-detail .col-xs-12.col-sm-6 .address.item.box,
.order_delivery .col-xs-12.col-sm-6 .address.alternate_item{display:none}
.col-xs-12.col-sm-6 #address_invoice,
.checkbox.addressesAreEquals{visibility:hidden}
Hello I am trying to extract the span tags that are in nested DIV tags, using JSoup. The code below is just a snippet of larger code.
<div class="formitem formgroup horizontal">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">47 Lower River St</span>
</span>
<span class="formitem formfield">
<span class="value" style="font-weight:bold">531</span>
</span>
</div>
</div>
</div>
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">Toronto</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Ontario</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">M5A0G1</span>
</span>
</div>
</div>
<div class="formitem formgroup vertical" style="width:150px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<label>List:</label>
<span class="value" style="font-weight:bold">$279,900</span>
</span>
<span class="formitem formfield">
<label>For:</label>
<span class="value" style="font-weight:bold">Sale</span>
</span>
</div>
</div>
</div>
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
</div>
I am trying to extract the text in the last SPAN tags (Toronto C08, Moss Park, Toronto and 120-21-S)
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
I have parsed other parts of the document with success however, I can't seem to isolate these spans. The snippet of code is from a much larger page (full page). I may be using the wrong approach, but here is what I did to capture the spans between the parent DIV (results at top of post).
Elements elements = doc.select("div[class=formitem legacyBorder formgroup vertical]");
Element zoneElement = elements.select("div[class=formitem formgroup vertical")
.select("[style=width:500px]").select("div[class=formitem formgroup horizontal").first();
So now I have the first element but I need the last 6 span tags at the end of the block of selected code. Thanks
Open your browser's developer tool (F12), select the "inspect elements" tool, highlight the field you want (e.g. TORONTO C08) and choose its css selector. For "TORONTO C08" it will be:
#C3627690 > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > span:nth-child(2) > span:nth-child(1)
Do the same for all the other elemens. After getting all the selectors, check them closely - maybe they have a common pattern (e.g different only at the 3rd value), so you will be able to iterate over them with a loop.