Edge to Edge Images ( the non - background-image variety )

General Discussion
1

Hello,

So I was testing out Blocs ability to do “Edge to Edge” Images of the non background-image variety method (for the obvious reasons of alt tags, etc.). Just using the 1, 2, 3, 4 basic “Structure” Blocs + the Image Bric.

Everything seemed well as I set Edge to Edge, removed gutters, padding margins, etc., Also as seen in the screen shot below there is nothing difficult about replicating it, so if anyone wishes to try as well - and see what you get as an outcome. It happens in version 2.2 and the 2.3 Beta also. So perhaps its always been present in version 2.

But anyway, upon pre-viewing in Chrome you get the following artifacts between Blocs:

Edge to Edge Images.png1490×1129 16.4 KB

You will notice the lines appearing horizontally (only) between Blocs, when resizing the browser window. They are not consistent and change as you resize. Being quite picky, I would not accept that occurring.

So I then quickly tried the same thing natively just using vanilla Bootstrap and a text editor. I quickly found no such issue across browsers with native Bootstrap.

So I assumed it must be something present in Blocs native associated CSS classes, I tried a few things but could not make a difference. The only thing I noticed which I guess I never had before is Blocs uses “display:table”, “display:table-cell”, “table-layout”, etc., for Bloc Groups - not sure if that would play role.

@norm being more intimately familiar with Blocs native CSS classes, do you have any thoughts what amongst them could be causing these lines to occur?

Also has anyone else, @mackyangeles , or other users - used non background-image Edge to Edge images in your designs successfully? Does anyone have an example or instance where they did?

Bloc_User

2

@Blocs_User do you get the same artifacts if you set the browser to a scale that shows them and then refresh so its initial load state is the problematic width?

The table class rules are used to keep bloc group content vertically centered (if I remember correctly) as the stacked areas need to be the same height regardless of content in them, so this keeps things looking tidy rather than flowing content from the top of the group with extra unused space at the bottom.

3

Thanks for responding @norm.

It can occur both on opening and of course resizing as well as refreshing if already present when opened.

If you are lucky and your window falls into a small range of random sizes where it does not occur, then yes you can also refresh and not see it either. But if it does appear on opening, refreshing does not alleviate it. When resizing it appears and disappears at any given pixel size change of the window.

// —————

So concerning the use of table class, you mean keeping the columns the same height?

4

@Blocs_Userno ok I’ll take a look. No the table rules are for keeping the content inside them vertically centered.

5

Ok thanks @norm

6

@Norm I reported this bug before. Can’t figure it out same on how to handle this. But in some instances it works fine but alot it does this bug

7

Thanks @mackyangeles, for letting me know that its an ongoing known issue (previously reported bug) to be aware of, and required to be addressed. Good to know it’s not just me at least.

1 Like
8

@mackyangeles,

I need to start forwarding question(s) to you in the future to get responses.
You seem to have high priority status. :wink:

@norm,

Here in the original thread and post, it was stated as being a Chrome issue, however as stated previously above:

So I then quickly tried the same thing natively just using vanilla Bootstrap and a text editor. I quickly found no such issue across browsers with native Bootstrap.

That’s why I presented the question regarding Blocs specifically.

9

So the native BS version you created, would you mind hosting that and sharing a link, so I can Take a look.

By the way I have no priority here I just do by best to respond, when I get time. Macky also emailed me recently regarding the issue so that is most likely why he got a response in his thread.

10

Hey @Blocs_User,

so I’ve some spent more time on this and Ive found its something todo with the table classes. I’ve rewritten the CSS for bloc groups so they take advantage of Flex box and it fixes the issue. Give build 6 a good test when its available later today.

11

It was just simple humor @Norm. I was merely updating this thread to reflect and respond to your comment in the other thread regarding the same topic matter. :wink:

Sure, below is a basic example which mimics the screenshot done with Blocs as seen in the first post above. It uses basic Bootstrap, basic styling and the same size placeholder image as used within Blocs. It yields the same results, except correctly without the described “thin white line bug”. It uses all remote references so you can easily test it however you like.

Be advised that it does use BootStrap 3.3.7 however and Blocs uses 3.3.5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Edge to Edge - Vanilla Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />	
	<style type="text/css">
		.imgDiv{width:100%;height:auto;display:block;}
		.noGutter>[class*='col-']{padding-right:0;padding-left:0;}
	</style>
</head>
<body >
<div class="container-fluid">
    <div class="row noGutter">
        <div class="col-sm-4">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-4">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-4">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row noGutter">
        <div class="col-sm-3">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-3">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-3">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-3">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row noGutter">
        <div class="col-sm-6">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
        <div class="col-sm-6">
        <img class="imgDiv" src="http://placehold.it/1200x840"/>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

I won’t say anything about originally mentioning the use of display table in my first post (humor also). :stuck_out_tongue:

For anyone whom is curious these where the CSS changes for the Bloc Groups in Blocs 2.3.1 BETA BUILD 6:

/* ------------ Originally Used Display Table, etc., ------------ */

/* Group Styles */

.bloc-group{
	width:100%;
	display:table;
	table-layout: fixed;
}
.bloc-group .bloc{
	position:relative;
	display: table-cell;
	vertical-align: top;
}
/* [... etc ...] */

/* ------------ Updated to use Display Flex ------------ */

/* Group Styles */

.bloc-group{
	display:flex;
}
.bloc-group .bloc{
	flex: 1;
}
/* [... etc ...] */

Thanks for responding @Norm, I will be curious to hear your thoughts.

Blocs_User

1 Like
12

@Blocs_User ah cool! No worries, It’s sometimes hard to know weather it’s serious or a joke here in the forum.

Anyway from all my tests it seems to have fixed it up, and as you can see the css markup is much more eligant with Flexbox.

13

True.

But I think however the more basic vanilla Bootstrap example I posted, still demonstrates a cleaner approach (compared to Blocs) without the need for so many divs (commonly referred to in the past decade as “divitis”) , and lots of classes (commonly referred to in the past as classitis) etc. I likewise could have just as easily made that example even simpler than it already is and yield the same result by removing the container-fluid divs as well. Thus it still remains a good comparison from those standpoints, IMHO.

So …

In this vain I hope that Blocs will transition and move towards an even more Vanilla & Cleaner approach both with Bootstrap and the corresponding Bloc’s HTML & CSS it creates (as referenced above). Along with possible consideration for an overall Semantic HTML5 vanilla development workflow option in general down the road (as was previously discussed in another thread).

14

The bloc groups keep a uniform vertical height regardless of what content occupies the multiple sections. Currently all of your imgs all have the same scale, how would your code function if an image was placed on one side and a single line of text on the other. Consider then the area with text has a background colour. Without flex would this section with a line of text still fill the same vertical space as the image side and give you a flush vertical height with both sections?

15

I understand your point and know that Blocs needs to factor in as many case scenarios as possible for the various Blocs, Brics and user decisions. However my comment was more towards the overall notion of keeping things as minimal as possible in all regards. Certainly FlexBox can aid Blocs with this, no dispute there. Hopefully you likewise understood the broader intention with my comment, as well?

16

Of course, I like our discussions :slight_smile:

Im 100% open to improvements and in general a lighter approach. But as you said I need to keep things as flexible as possible, I just like to explain some of the challenges I face with areas like this, so anyone who puts forward ideas doesn’t just think that Im dismissing them.