I'm writing a profile page with TwiBoo (2.3.2) composed of a row, a span7 for the person projects, then a span5 for buttons:
<div class="row-fluid">
<div class="span7 profile-left">
<h4><?= $this->lang->line('profile_your_pjts') ?></h4><br>
<!-- THUMB PROGETTI -->
<ul class="thumbnails">
<?php foreach($list_pjt as $progetto): ?>
<li class="span4 pjt-thumb">
<div class="thumbnail">
<!-- PROJECT DATA FROM PHP/MYSQL -->
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="span5">
<h4>BUTTONS</h4>
<!-- SUBSCRIPTION DATA -->
<!-- BUTTONS -->
</div>
</div>
This is the result:
The problem comes when I add more thumbnails and goes to a new line, where instead of 3 per line I only get 2 from second line on:
I tried fixing the left-margin with plain css but just moves ALL the thumbs left keeping the same problem. Any idea on why?
I think wrapping your thumbnail divs (every 3 of them) in a row will make the trick.
Related
I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.
I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.
When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.
I just cant figure it out!!
Here’s my initial code for pulling through the logo repeater field:
<div style="background-color:#ffffff;width:100%;">
<div class="container margin-top-20" >
<div class="row">
<?php if( get_field('client_logos') ): ?>
<div style="clear:both;margin-top:20px;"></div>
<h3 class="brand-white" >Our Clients</h3>
<ul class="blocks blog-block logo-block">
<?php if( get_field('client_logos') ): ?>
<?php while( has_sub_field('client_logos') ): ?>
<li>
<div class="block-image">
<div class="logo-image">
<div class="logo-center">
<?php $logoblock = get_sub_field('client_logo'); ?>
<img src="<?php echo $logoblock['sizes']['medium']; ?>">
</div>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
and here's my modal window code:
<div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
<div class="modal-header">
<!-- Close x --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Logo --> <?php the_field('client_logo');?>
<!-- Title --> <?php the_field('client_title');?>
</div>
<div class="modal-body">
<!-- Case Study --><?php the_field('text area 1');?>
<!-- Testimonial --><?php the_field('text area 2');?>
</div>
</div>
</div>
</div>
I feel like all the answers are there but I cant figure out how to put them together. If anyone could help me combine the two that would be amazing!!
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
I am working on an acceptence test to see if I can go from homepage to categories however no matter what I try I does see the link but I can't click it.
<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('I click category');
$I->amOnPage('/');
$I->seeLink('Categories', '/categories');
$I->click('category');
?>
The HTML:
<div class="col s12 m4">
<a href="/categories" >
<div class="card">
<div class="card-content">
<div class="teal-text center-align" name="category">
Categories
</div>
</div>
</div>
</a>
</div>
</div>
I don't know if Codeception is looking for the 'name' attribute of html tag. Rather than this, you should try other ways of use of click method: http://codeception.com/docs/03-AcceptanceTests#Click
Also you can try this:
$I->click(['name' => 'category']);
I have added a simple MDL drawer element to the 'Test Template' example (from getmdl.io) and set href='#overview' to link to the 'overview' content page. When clicking the relevant link in the drawer element, nothing happens! I was expecting the content section to render the 'overview' page similar to clicking the tab in the header section. Clearly, I must be doing something wrong. Here is a snippet showing the drawer element and the opening div element of the 'overview' page.
...</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#overview">Overview</a>
<a class="mdl-navigation__link" href="#features">Features</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">...
Any help would be much appreciated! Thanks.
which template is this in getmdl.io please?
I have done this:
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home">Home</a>
<a class="mdl-navigation__link" href="#about">About</a>
</nav>
</div>
<main class="mdl-layout__content">
...
</main>
</body>
and it's diplaying #href on the url and the page remains still.
cross-check your structure with that and if possible, give some more code I check on my end?
I have a list of items in one of my view.
I can only fit up to 6 items, and it's laid out like this:
I used class="col-md-2" for each one.
When I have more than 6, it just simply go down to the another row.
I don’t want that. You can see it here.
Now, if the list has 6 or more items,
list them horizontally
show the big > so that the users will know that there is more
show the 2 dots in the middle
Edit
This is what I got so far. I used Larval 4 so this syntax is in HTML/Blade.
#foreach ( MarketingMaterialCategory::all() as $mmc )
<h2><i class="fa fa-file-image-o color lighter"></i> {{{ $mmc->name or '' }}} <small> </small></h2>
<div class="row">
#foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)
<div class="col-md-2" >
<!-- Shopping items -->
<div class="shopping-item">
<!-- Image -->
<div class="col-sm-12 imgbox" >
<!-- <span class="col-sm-6"></span> -->
<img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
</div>
<!-- Shopping item name / Heading -->
<h6>{{{ $marketing_material->title or '' }}}<span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>
<!-- Shopping item hover block & link -->
<div class="item-hover bg-color hidden-xs">
Download
</div>
</div>
</div>
#endforeach
</div>
<hr>
#endforeach
Can someone help me how to resolve this ?
Bootstrap doesn't support that kind of scrolling. However, I have used this JavaScript library in the past and it does pretty much exactly what you want: Slick.js
It is very flexible and it will only show the scrolling options if it can't display all the contents on the page.
If you use it though, do not use the bootstrap col-md-2 classes, just set a manual width.