Is there a good method to toggle template's reactivity on client-side by checkbox?
Client Main HTML
<section class="margin-bottom-10" id="trend">
<div class="headline">
<h4><i class="fa fa-th-large"></i> section1</h4>
<div class="checkbox auto-update-check">
<label><input type="checkbox" id="Trend" checked="checked">auto-update</label>
</div>
</div>
</section>
<div class="col-lg-4 col-md-4 col-sm-6">
<!--<div class="col-md-12 col-sm-12">-->
{{> list1}}
<!--</div>-->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list2}}
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
{{> list3}}
</div>
Main has 3 sections and checkboxes.
and I want to toggle the reactivity(auto-update) each section on client-side.
pic
Related
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
I'm attempting to make a row that will contain 3 columns. One for the pagination count, one to filter a table, and another to hold a button.
Everything looks great in small, medium and large viewports, but when I maximize my window, there is a huge gap on the right above my table. See image below (bottom) for reference.
I'm not sure where I'm going wrong. I've tried every variation of flex-fill, w-100, etc. that I can think of to get it to expand to 100% width on xl viewports, but I can't figure it out.
Here's the relevant code for that section that sits above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController#index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
Here's the code from my template. Code above is part of #section('content') which gets output to and parsed by #yield('content') below.
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content') <!--this is where the original code appears-->
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
not sure if this is what you want achieve but, i tried my best to make it look like what you desire, let me know if is really this: https://jsfiddle.net/leandrorr/t4rbfdv3/6/
html:
<div class="result-count p-4 border">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
Showing 1-20 of 32 total
</div>
<div class="col-lg-6">
<form action="" class="form-inline float-right">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
</div>
</div>
I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->
I'm trying to achieve the setup illustrated below with Bootstrap 3, but I can't quite find a way to do it, especially to keep it responsive. I looked at panels and tables, etc. but then tend to not have really worked out great so far.
I figured it out in the end. Just took a bit of messing around with rows within the panels.
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default container-fluid">
<div class="row panel-heading ">
<div class="col-sm-1 pull-left"></div>
<div class="col-sm-4 col-xs-12">Asset ID</div>
<div class="col-sm-2 col-xs-12">Status</div>
<div class="col-sm-2 col-xs-12">Asset Nodes</div>
<div class="col-sm-3 col-xs-12">Manage</div>
</div>
</div>
<div class="panel panel-default container-fluid">
<div class="panel-heading row" role="tab" id="headingOne">
<div class="col-xs-1">
<div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div>
</div>
<div class="col-sm-4 col-xs-12">
xxx
</div>
<div class="col-sm-2 col-xs-12">Normal</div>
<div class="col-sm-2 col-xs-12">?</div>
<div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
dsfsdfd
</div>
</div>
</div>
</div>
http://www.bootply.com/NLxmcWu4SJ
I'm working with bootstrap 3 and trying to piece together a base layout for a flask app. so far I have:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="content">
<div class="pull-middle">
<h1 class="page-header">Create an awesome App template with Bootstrap.</h1>
<div class="container">
{% block content %}
{% endblock %}
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
<div class="panel panel-default ">
<div class="panel-body ">
<form action="#" role="form">
<div class="input-group ">
<input type="email" class="form-control" placeholder="Email Address" required>
<span class="input-group-btn">
<button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="container">
<small>© Copyright 2015. </small>
</div>
</footer>
I want to widen the email address form, leaving the green button as is. How can I do this?
You are using the Bootstrap Grid classes wrong.
The input fielding is getting space what it has been given by parent div using the grid class col-lg-4 making it col-lg-6 would give more space to it's child divs.
So using these classes would help textfield to take more space.
col-xs-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3