Problem with font-size (line-height) affecting <img ... > elements
(at least in webkit / safari) It seems that extra space is applied under elements according to the font-size / line-height that affects the parent container.
in this example, the outer div is larger than the image (space is added under the image):
<div class="outer">
<img src="http://placehold.it/300x100" width="300" height="100">
</div>
but in this example no space is added:
<div class="outer">
<div style="width:300px; height:100px">
</div>
The bigger the font-size(line-height) on the outer div, the larger the space added. So the following CSS will fix the problem (but isn't a useful fix really):
.outer{
line-height: 0;
}
See a full demonstration of the problem here:
http://jsfiddle.net/mikkelbreum/wtKS2/
I'm sure this is a known 'problem', but I couldn't find a good treatment of the problem from my googling..
I would like to hear from others, if this is a well known problem (why would an image be treated as a text block with regards to line-height being added below it.) And is there an agreed upon way to handle this problem?
A way to solve it is adding the CSS property vertical-align:middle; or vertical-align:text-bottom; to the <img>. This will remove the space under the image.
Related
While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.
I just had a heavy problems with a vue cli project with interactjs
the latest version is installed
"interactjs": "^ 1.10.3",
I use in vue https://github.com/kimuraz/vue-interact
Now I have the following problem, in a dummy project I have a component from which several multitouch elements can be created, these can be scaled, rotated, sorted ... all of them work wonderfully with dummy content.
in a real project I have a div that acts as a container for a scrollable content, suddenly the drag in this area no longer worked. At first I thought it was because of the container/scollable div combination, but when I remove the container the problem remained.
The problem currently occurs when the element loaded into the slot is a text element with a few lines of text. with 2-3 lines it can be moved on the text, if there are more lines the drag start and move event will be triggered, the move only a few times. so the window can be moved a bit.
what can it be, how can i handle it?
here the simple structure of the component:
<div :style="scaleRotateStyle" ref="scaleit" class="scale-element" v-show="isWindowActive == true" #mousedown="touchDown">
<div class="window-content-back" ref="content">
<div class="window-content-scroll">
<div class="window-content">
<slot :idNr="idNr" ></slot>
</div>
</div>
</div>
</div>
edit: after further testing I come to the following conclusion:
it is due to the overflow-y: auto of the scroll container.
.window-content-scroll {
...
overflow-y: auto;
overflow-x: hidden;
...
}
if I set this property to hidden I can touch it anywhere as usual.
what options do i have?
Pack the class '.window-content-scroll' in ignoreFrom within interact.js. Unfortunately, the entire content area is then no longer draggable, I thought I could move the window horizontally ...
scrolling the window content via javascript, does that make sense, is there a good example?
maybe someone has a nice idea?
Closing the loop for others who might find this: touch-action: none; worked for me, as suggested in #Shmack's comment. Was working with mouse, not touch.
I have a large amount of excess whitespace on the right hand side of my page (shown best when viewed on a mobile).
I believe this is caused by a margin-right somewhere but I can't seem to find the underlying issue.
Live link: http://185.123.96.102/~kidsdrum/moneynest.co.uk
I found two issues:
First, the #weeklyearningschartimage image should have a width of 100% so that it resizes with the parent. This should fix most of the extra white space on mobile.
After fixing that, you may notice that there is still a small bit of white space on the right side (even on desktop). This is because the .row elements are not wrapped in a .container-fluid
Check here for the proper grid HTML structure: http://getbootstrap.com/css/#grid
I imagine part of the problem is...
<div class="row richard">
.richard {
background-color: #232323;
color: white;
font-size: 130%;
padding: 2%; <-------- This applies to left and right as well
font-weight: bold;
}
You are adding padding to the left and right of a row which might give you overflow.
Yes, I see what's wrong in your website, see your code
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text">
the class homepage-text you have written max-with: 700px; please fix it with some %(80-90).
I am using a dijit/layout/TabContainer with two tabs. I create them like this:
<div dojoType="dijit.layout.TabContainer" doLayout="false">
<div dojoType="dijit.layout.ContentPane" title="First tab" style="background-color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
<div dojoType="dijit.layout.ContentPane" title="Second tab" style="background- color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
</div>
This works fine for Firefox, Chrome and IE9, but doesn't render properly on ipad with Safari. The first time the first tab displays correctly, but then it takes the width of the second tab, which is larger. I believe that this should not happen as I have added the doLayout flag. I don't know if it matters, but I am using dojo with xpages framework.
Thanks a lot in advance!
I added
controllerWidget="dijit.layout.TabController"
to the div of TabContainer along with a width in percent and and now it displays correctly in Safari too.
The problem was that Safari needed a width to be defined. But as my content is dynamic, I couldn't define a fixed width in pixels. So in order to use width in percent I had to also add the above flag. I don't know if this is the appropriate way to achieve this, but it fixes my problem.
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle