I want to make close function of card-reveal like FAB button.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Here is my JSFiddle
What I need? Although material design Icon now work in this example, I need to make "close" button as fab. It means, even card-reveal content scroll down, close button keeps position in card-reveal section and visible.
Is it possible?
The nature of the card component seems to make this tough to achieve without getting hacky and mixing strange CSS properties. I think the best I can achieve that still looks pleasing is a FAB that travels up and down with the card-reveal. Another solution may exist, but it may not be as clean.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Card Title
</span>
<a class="activator btn-floating red right"></a>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title
<a class="card-title btn-floating red right"></a>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Related
I created a recipe website, you can find it here https://hungry-vegetarian.com/.
The tab on the index page is a vue instance. I'm trying to create a search bar that is also a vue instance.
The problem occurs when I try to display searched recipes on the index page. It just shows the search result on top of the search bar.
Ideally, only searched recipes should appear on the tab just like they are now but without any indications on top of the tab like Breakfast, Salad, Bakery, etc.
I don't know how to make two objects work together. For now, they work separately without communicating with each other.
SEARCH
<div id="search">
<div class="main-search">
<h1 class="search-question">What are you in the mood for?</h1>
<div class="search-box">
<input type="text" v-model="searchQuery" class="input-search" placeholder="Bread">
<button class="btn-search"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="container">
<div class="recipe" v-for="post in filteredList">
<div v-if="searchQuery">
<a v-bind:href="post.url" class="recipe-card__card-link" target="_blank">
<img v-bind:src="post.image" alt="" class="recipe-card__image"/>
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{post.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{post.body}}</p>
<a v-bind:href="post.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
tab
<main id="tab">
<header>
<nav>
<ul>
<div id="arrow">
<span></span>
<span></span>
<span></span>
</div>
<li v-for="(tab, tabName) in tabs" :key="tabName">
<button class="tab" #click="setTabActive(tabName)" :class="{'active': tabName === activeTab}">
<span class="tab-copy">{{ tabName }}</span>
<span class="tab-background">
</span>
</button>
</li>
</ul>
</nav>
</header>
<article>
<div class="container">
<transition name="fade" mode="out-in" appear :duration="500">
<tab-content v-for="(tabContent, t) in tabs" :data="tabContent" :key="'content'+t" v-if="t === activeTab" inline-template>
<div class="content-wrapper">
<div class="recipes" v-for="(recipe, i) in data.recipes" :key="i">
<a v-bind:href="recipe.url" class="recipe-card__card-link"></a>
<img :src="recipe.image" alt="" class="recipe-card__image">
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{recipe.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{recipe.body}}</p>
<a v-bind:href="recipe.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</tab-content>
</transition>
</div>
</article>
</main>
I tried to combine instances search and tab into just one instance tab, but it always gives me a Vue warning:
[Vue warn]: Property or method "searchQuery" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Also, I feel like I can have just the wrong approach to this problem I am trying to solve. Please, any suggestions are welcome. I am stuck.
I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>
Try adding pointer-events: none to the images. It should do the trick.
please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.
I wanted my panel heading to contain some text and a button, the former being left-aligned and the latter, right-aligned. But as soon as I apply the class row to my panel header, it breaks out of the parent div and takes up what I believe to be the container width.
Here's the code I'm using:
<div class="panel panel-primary">
<div class="panel-heading row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div>
<a href="#" class="btn btn-default col-md-1" >Log out</a>
</div>
</div>
<div class="panel-body">
</div>
</div>
And here's the result:
How can I correct this?
It seems to me like you just need to move the "row" to be inside the "panel-heading" rather than on the same level, as they both have relative CSS positioning properties. I tried the following code:
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div class="col-md-1">
<a href="#" class="btn btn-default" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
Stackoverflow rocks!
</div>
</div>
and it gave me this output (which is what you're looking for, I hope):
I hope that helps
EDIT: I tried using "pull-right" as others have suggested and it seems to create more troubles as it messes the top/bottom margins as well since it makes the display block relative to container (Which I would generally recommend against doing, even if it works for you).
EDIT2: moved the "col-md-1" class into an encapsulating "div" to solve the button's margins' issue.
May be you need something like following?
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-10 col-sm-10">
<h4>Manage Your Subscriptions</h4>
</div>
<div class="col-md-2 col-sm-2">
<a href="#" class="btn btn-default pull-right" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
</div>
</div>
Let me know if it works
You can use pull-left and pull-right instead of grid system, so the components will be rendered on single line even on small screen (if there is enough space):
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="pull-left">Manage Your Subscriptions</h4>
<span class="pull-right">
<a href="#" class="btn btn-default" >Log out</a>
</span>
<div class="clearfix"> </div>
</div>
<div class="panel-body">
</div>
</div>
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
In this executed normally in the maximized window but i think its not responsive because when i compress the window the design view as vertically one by one but i want horizontal view
<div class="col-md-12">
<div class="row-fluid">
<div class="col-md-3">
<span class="text-center"><b>SELLERS</b></span>
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-arrow-down">RATING</span>
</div>
<div class="col-md-3">
<span class="glyphicon glyphicon-arrow-up">DELIVERED BY</span>
</div>
<div class="col-md-1">
<span class="text-center">OFFERS</span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-arrow-down">PRICE</span>
</div>
<div class="col-md-2">
</div>
</div>
</div>
This is correct. Currently your columns will stack when they hit the 'medium' breakpoint, which is 992 pixels according to the Grid table on the Bootstrap website. This means once your browser width slips below 992 pixels width it will revert to stacked.
You can change your col-md-* classes to be col-sm-*, this will make them change to stacked at the 'small' breakpoint, which is 768 pixels. For more information carefully read the documentation and examples here - http://getbootstrap.com/css/#grid