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>
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'm looking to create a dropdown button with a popover. The menu works fine by itself but once the popover is added the menu sticks in the open position once clicked. How would I get dropdown and popover working together?
<div class="btn-group">
<button class="btn btn-primary" data-bs-toggle="tooltip" rel="nofollow" title="Make a GET request">GET</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" data-bs-toggle="tooltip" title="A title">An item</a>
</li>
</ul>
</div>
<script type="text/javascript">
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
I've also created it on JSFiddle
This is the easiest workaround i could find. Divide the toggle and the tooltip functionalities, and it will work as intended.
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="sr-only" data-bs-toggle="tooltip" title="Specify a format for the GET updated">Toggle Dropdowns</span>
</button>
This is where i find the idea for the solution stackoverflow similar problem
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);
}
}
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.
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.