I am trying to use material box for card images. My target is to click on card image and view it fullscreen.
<div class="card large hoverable">
<div class="card-image">
<img materialize="" class="materialboxed" width="650" src.bind="movie.poster">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">${movie.title + " - " + movie.imdbRating}<i class="material-icons right">more_vert</i></span>
<p>${movie.genre.join(', ')}</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">${movie.title}<i class="material-icons right">close</i></span>
<p>${movie.director}</p>
<p>${movie.genre.join(', ')}</p>
<p>${movie.actors.join(', ')}</p>
<p>${movie.plot}</p>
</div>
</div>
The problem is that it could not make the image container bigger. So the image will be zoomed but because the container is small it couldn't show all of the image.
It was an issue an fixed in their last commit:
https://github.com/Dogfalo/materialize/issues/2091
Related
I have replicate this code to get 2 column structure in which left side is image carousel and right side is some text, I got the text right but the carousel is not displaying, I am using bootstrap-5 and have linked correct bootstrap css and js, that's verified:
Here is my code:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner active">
<div class="carousel-item">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>
You added the active class in the wrong element. Instead of the carousel-inside element, the active class must be used to mark one of the carousel-item elements as the initial active one:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>
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>
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
I am developing a site with parallax effect using the following plugin :-https://github.com/pixelcog/parallax.js/
I need to implement a slider in the first section. But the problem is that parallax plugin use
data-image-src="/path/to/image.jpg"
to render images.
Even though the slides are sliding, the image remains the same..i.e the image of the first slide.
I need to slide the images as well. Is there a workaround for this :-
<div class="carousel-inner" role="listbox">
<div class="item active parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/home-slide-banner1.jpg">
<div class="carousel-caption">
Caption 1
</div>
</div>
<div class="item parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/home-interactive-bg.jpg">
<div class="carousel-caption">
Caption 2
</div>
</div>
<div class="item parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/goodwp.com_18663.jpg">
<div class="carousel-caption">
Caption 3
</div>
</div>
Please help