I'm developing a website and ran into an issue Here
The service image all have a small amount of white space between them and the bottom of the container. I've searched SO and have seen similar issues (but it wasn't apparent they were using bootstrap or some responsive framework) and have also used firebug to figure out what is causing the issue (and have tried implementing the suggestions found on the other posts)...
I'm not sure if the issue is a class (firebug says no), or if it's just the combination of the ".img-responsive" class and the dimensions of the image.
If anyone could take a look and lend some insight to this it would be extremely helpful and greatly appreciated. Thanks!
The HTML where the issue is found is below:
.service-img-bg {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 service-img-bg pull-right">
<figure class="imghvr-slide-left">
<img class="img-responsive service-main-img hidden-md" src="media/services-icons/offered-service-img.png" alt="Hologlass">
<img class="img-responsive service-main-img visible-md" src="media/services-icons/offered-service-img-sm.png" alt="Hologlass">
<figcaption>
<a class="video-image playVideo" href="https://www.youtube.com/embed/Q4QI3VyC5p4?rel=0&showinfo=0" data-toggle="lightbox" data-title="3D Mapping Demonstration">
<i class="fa fa-search overlay-icon"></i>
</a>
</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow slideInLeft pull-left service-text-bg-img">
<div class="col-md-12 service-text-container">
<h5 style="padding:0 0 15px;">HOLOGRAPHIC</h5>
<p>Our method of applying specialized light absorbing film-- and in some high-ambient lighting situations, low voltage autodimming electrochromic film-- to a transparent substrate of glass, acrylic or polycarbonate transforms these common surfaces into
a display that truly commands stopping power. We’ve developed a solution that is a head turning alternative to traditional digital signage that is suitable for storefronts, wayfinding and interactive multi-touch or touchless concepts.
<br>
<br>Our lineup offers a full range of rear, front & dual projection applications. Both rigid and film based surfaces custom built to spec, with additional iturnkey installation services your project which include specialty mounting, adhesions and
even massive ‘Holoboard’ structures up to 40 feet wide.</p>
<div class="page-scroll">
<a href="#footerBlock" class="inquire-link">
<button class="inquire-btn">INQUIRE NOW</button>
</a>
</div>
</div>
</div>
[class^="imghvr-"], [class*=" imghvr-"] make this class's property display: block, instead of display: inline-block
See here it solved http://prntscr.com/d57tkc
Well #Jim Fahad is not 100% correct, you do not need to set the img display:block, you just need to make the img block element - thus to suppress the default display:inline or display:inline-block.
To do that you can set display:block as mentioned, but also display:table or display:flex will work, or even for example float:left.
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I've been using Materialize on my cards and want the titles to truncate.
I tried to use the simple code example materialize has on their website but it won't work. Here is my example:
<div class="card hoverable waves-effect waves-light">
<div class="card-image" id="house-pic" style="height: auto;">
...
</div>
<div class="card-content" style="padding-left: 0px; padding-right: 0px;">
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
</div>
<div>
I also use the min.css and js libraries on their website. It seems simple enough, but the cards just stretch if the text is too long. Please let me know if you have any ideas, thanks.
I'm not sure where exactly in your code is the problem so I'm guessing:
I supposed the card is stretching because of the text being too long in this section:
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
I would replace span element with a div element like so:
<div class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</div>
Because span is an inline element vs div which is a block element.
An inline element does not start on a new line and only takes up as
much width as necessary.
vs
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Necessary vs available :D
I have an ng-repeat in my html that creates around 750 divs (i am producing labels for my products), i have designed them how i would like them to look and i am happy with this, but as they are quite big the print preview doesn't look anything like my design.
I want to know if it is possible in Angular to easily iterate through each of the ng-repeat items and save them as a png?
Below is my ng-repeat :
<div class="col-lg-4" ng-repeat="p in productcodes">
<div class="contact-box" style="padding:0px !important;height:370px;width:650px;">
<span ui-sref="profile">
<div class="col-lg-3" style="padding:0px">
<img alt="image" class="img m-t-xs img-responsive rotateimage" style="max-width:1000% !important;width:200%" ng-src="">
</div>
<div class="col-lg-2" style="padding:0px">
<div >
<h3 style="margin-top:45px;">Code:</h3>
<h3>Colour:</h3>
<h3>Item:</h3>
<h3>EN Cert:</h3>
<h3>Size GB:</h3>
<h3>Size SE:</h3>
<h3>Size EU:</h3>
<h3>Length:</h3>
</div>
</div>
<div class="col-lg-3" style="padding:0px">
<h3 style="margin-top:45px;"><strong>{{p.pcode}}</strong></h3>
<strong>
<h3>{{p.Colour}}</h3>
</strong>
<h3>
{{p.shortdescription}}</h4>
<h3>N/A</h3>
<strong>
<h3>{{p.Size}}</h3>
</strong>
<h3>C62</h3>
<h3>3XL+</h3>
<strong>
<h3>{{getsize(p.SizeCode)}}</h3>
</strong>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" style="padding:0px">
<img alt="image" class="img-circle m-t-xs img-responsive" style="margin-top:60px;width:200%;" src=".{{p.localimg}}">
</div>
<div class="clearfix"></div>
</span>
</div>
</div>
I want to know if it is possible in Angular to easily iterate through
each of the ng-repeat items and save them as a png?
Short answer
No
Long answer
Save as png where? You can store them on server side or your comp. Its not related to Angular. For example, if you would use cloudinary as image storage, you will be able to transform image resolutions for preview by changing URL:
http://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg:
http://res.cloudinary.com/demo/image/upload/w_30,h_23,c_scale/turtles.jpg
Further, its not good practice to show 750 images at once, you gonna kill your web page. Keep in mind, after 2K of watchers the web view performance slows down.
I believe if you have fixed height of ng-repeat item, I would use infinite scrolling. For example take a look on Google Material virtual Repeat approach.
Other solution
If your image preview is small, you can convert image to base64 and it will save you from calling 750 HTTP requests
Here is a link to the site I am currently having issues with:
Link to the Site
as you can see at a full-size window, everything looks quite nice - like a twisted my senses graphic. And now:
As the width of the browser window falls below 1200 pictures (humanoids) "descend" one after the other.
What to do and how to do your photos to a resolution of 768px scale all like their background?
What to do and how to below 768px resolution photos arranged themselves one after another and the lyrics appeared next Featured click on a puppet loaded text using js.
I would be grateful for any suggestions.
Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
</div>
For example the code above has different behavior on small, medium and large screens. The columns resize according to the screen size. On your source code you are only using col-lg type cols.
Since your code is not posted, and you asked for suggestions, I will give you the ones I have. first if your images are moving below each order when you go below a certain screen size/width it is because you wrote code to do that or at least you are not properly using bootstrap. Add a class of img-responsive to your images. It is a bootstrap class that helps you with image responsive designs.
Add a class of col-sm-3 to divs surrounding the images or to the images themselves, it will keep them close on one line for from lg desktops to tablets. if you want the same thing for mobile, you had a class of col-xs-3
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.