I using Bootstrap 3 and like to re-ordering the grid column in mobile layout.
Desktop is looks like as screenshot:
where open in mobile phone, the picture is goes to bottom, isn't possible to place the picture to top by re-ordering the grid column when user view in mobile version?
code for the output:
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div>John Smith</div>
<div>Application Engineer</div>
<div>
<dl class="dl-horizontal">
<dt>Reg. Number</dt><dd>M8553</dd>
<dt>Mobile Number</dt><dd>012-5229887</dd>
<dt>Email</dt><dd>john.smith#email.com</dd>
</dl>
</div>
<div class="row">
<div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div>
<div class="col-xs-12 col-lg-10">
<div>
<span>
<button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button>
</span>
<a class="btn btn-success btn-alink" role="button" href="mailto:feedback#email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a>
</div>
<div><span>0</span> liked, 63 views.</div>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
<div class="col-sm-4 col-lg-3">
<img src="images/john-smith.jpg" alt="john-smith">
</div>
<!-- /.col-lg-3 -->
</div>
<!-- /.row -->
</div>
Take a look at this
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
heres the link http://getbootstrap.com/css/
Related
I'm building a side navigation panel using Bootstrap collapse and want all sections to be open on load. My code below does this, but it also jumps to the middle of the page on load. It looks like the page jumps right under the second expandable section. Is there a way to fix this?
<div class="panel-group" id="accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseOne">My Case<i class="pull-right fa fa-plus"></i></a></h4>
</div>
<div class="panel-collapse collapse show" id="collapseOne">
<div class="panel-body">
At A Glance
Authorized Representatives
Benefits
Granite Advantage
Documents
Notices
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseTwo">My Profile<i class="pull-right fa fa-plus"></i></a></h4>
</div>
<div class="panel-collapse collapse show" id="collapseTwo">
<div class="panel-body">
Contact Information
Get In Touch
Security Settings
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title">Need Help?</h4>
<p class="small m-t-sm">If you have a question about your case, contact the Customer Service Center.</p>
<br/>
<i class="fas fa-phone fa-flip-horizontal m-r-sm blue"></i>1-844-CALL-HELP
<br/>
<i class="fas fa-envelope m-r-sm blue"></i>Email
</div>
</div>
</div>
Delete "show" from class names. And add this script to the head section.
<script>
$(document).ready(function(){
$('#accordion .panel-collapse').collapse('toggle');
});
</script>
I have a project in Ionic v1 and I am making some enhancements to it.
I have a list of cards where the card itself is clickable to take the user to more details. I need to add couple buttons on the card but I can't get the clicks to be captured by the button - the click goes to the card href. Sample code below.
<div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
<div class="item" ng-click="clickCard(evtKey)">
<div class="row">
<div class="col-20 row-center">
<div> Some stuff here</div>
</div>
<div class="col-80 item-text-wrap">
<div> More stuff here </div>
<div class="row text-center">
<div class="col col-33">
<div> More stuff </div>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" ng-click="alert('No')">No</button>
</div>
</div>
</div>
</div>
<p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
</div>
</div>
Looking for help on how to make the click on the button be captured by the button and not by the card. Examples I have found so far are all on doing that with Ionic v2 and later and not for v1.
Thanks,
-S
event.stopPropagation() will stop calling event from parent elements. And also don't put alert in ng-click
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
<button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
</div>
<div class="wizard" id="createacc">
<h5>Link</h5>
<section class="text-center">
<div class="pos-vertical-center">
<h4>Welcome to the sign in wizard. Please link your account if you're a debater.</h4>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-xs-12 col-sm-12">
<button class="btn btn--primary type--uppercase" type="submit">Link account</button>
</div>
<div class="col-sm-2"></div>
</div>
<br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-xs-12 col-sm-12">
<button class="btn btn--primary type--uppercase" type="submit">I want to add the "next" button here </button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</section> ... more code
</div>
I just wanted to add the "next" button within one of the sections as a substitute for the next button at the bottom. I've looked around and couldn't seem to find anything. I also tried to copy the class and the href #next and that didn't seem to work.
i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.
I have a table with an ng-repeat over a function that I want to be rerendered after a user logs in. How do I make a view load the ng-repeat and again to triger the function. Is there a way to make an ng-repeat rerender on a change in the model?
Here is the view, to give an idea why a function is used instead of just looping over a model. The repeat in question is ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index" :
<!-- CALENDAR NAV -->
<div class="calendar-nav">
<div class="prev">
<button class="btn btn-default pull-right" ng-click="vm.goToPrevWeek()" ng-disabled="vm.isCurrentWeek"><i class="glyphicon glyphicon-chevron-left"></i></button>
</div>
<div class="date">
<p class="text-primary text-center">{{vm.weekViewString}}</p>
</div>
<div class="next">
<button class="btn btn-default pull-left" ng-click="vm.goToNextWeek()"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
<!-- END CALENDAR NAV -->
<!-- CALENDAR HEADER -->
<div class="calendar-header">
<div class="weekdate-header date-header day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
<div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
</div>
</div>
<!-- END CALENDAR HEADER -->
<!-- CALENDAR CONTENT -->
<div class="calendar-content">
<div class="calendar-aside">
<div class="day-hour" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
<span class="hour">{{hourObject.hour}}</span>
</div>
</div>
<div class="calendar-days">
<div class="calendar-day day-col day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
<div class="mobile-day hidden-lg hidden-md hidden-sm">
<div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
</div>
<div class="day-hour hour-{{hourObject.number}}" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
<div class="hour">
<div class="half-hour"></div>
</div>
</div>
<!-- CALENDAR EVENTS -->
<div id="{{event.idName}}" class="event-container {{event.type}}" style="top: {{event.top}}px; left: {{event.left}}%; width: {{event.width}}%; height: {{event.height}}px;"
ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index" ng-switch="event.type">
<div class="buttons" ng-switch-when="">
<div class="amount">{{event.spotsAvailable}}</div>
</div>
<div class="buttons" ng-switch-when="success">
<i class="glyphicon glyphicon-ok-sign"></i>
</div>
<div class="buttons" ng-switch-when="full">
<i class="glyphicon glyphicon-ban-circle"></i>
</div>
<div class="text">
<span class="title">{{event.name}}</span>
<p class="locatie-time hidden-lg hidden-md hidden-sm"> <span>{{event.startsAt | date:'HH:mm' }}</span> - <span>{{event.endsAt | date:'HH:mm' }}</span> </p>
<span class="locatie-info">{{event.formattedAddress}}</span>
</div>
</div>
<!-- END CALENDAR EVENTS -->
</div>
</div>
</div>
<!-- END CALENDAR CONTENT -->
I ended up replacing the function in the ng-repeat with a direct link to the data the function was returning and now the view is updating.