I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>
Related
I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}
I am trying to create a responsive image wrap gallery. Each image will have a header. I distribute them using column-count of webkit.
The problem is this: I've specified a container to be "relative". Inside that container, I have an "absolute" header followed by an image. What seems to be happening in some values of column-count is that the header is going to another column and the image in the next. I need them both to be together at all times and I'm surprised why the absolute within relative container is not doing that.
A codepen for reference: http://codepen.io/pliablepixels/full/YwWLzy/
The core image gallery code is:(SO insists I include a code fragment when posting a codepen link, so here goes)
<div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
<span ng-repeat="image in images">
<div style="position:relative">
<div class="my_header">Header</div>
<img class="scaled_image" src={{ image.src }} />
</div>
</span>
</div>
Please change the column values and note the header behavior.
How does one solve this? (Note I must use an img tag - can't use background-image)
thanks
Columns
To protect elements from breaking and keep them entirely in a column you can add these properties:
.element {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
Your fixed example http://codepen.io/anon/pen/rxMWxa
Header
Such behaviour occurs because you've added line-height:0px to your container div. So you can just return header's line-height value to normal. Fixed that in codepen.
Using line-height sometimes can make headache. Try to use padding like below:
.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}
I am using Ionic Framework for my web application. Each page is displayed using ion-view. I want to print graph (or save it as pdf).
Here is my code,
<ion-view title="Report">
<ion-nav-buttons side="right">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<b style="padding:10px;">Patient Background Report</b>
<div class="text-center item"><canvas id="line" class="chart chart-line" data="agedata" colours="colours"labels="labels" legend="true" series="series" click="onClick">
</canvas>
<b>Age</b>
</div>
Print
</ion-content>
I using Chrome-browser. When I click on print button , it returns
"print preview failed".
How to print this page?
I was able to get my Ionic app to print by adding the following CSS:
#media print {
.scroll-content {
position: relative;
}
.pane {
position: initial;
}
}
Don't ask me why that works; I just know that it works for me, and I hope it also helps someone else!
I know that i might be a little bit late to the party but I hope that this would help others in future.
The solution for this problem is to overwrite default ionic components styling.
In defaults, some properties could broke our print preview like: position, height, overflow.
It's a must to remember that for printing:
height: 100%,
position: fixed/absolute/relative (in some cases),
overflow: hidden,
are 'the last nail in the coffin'.
None of container should have them set.
For position you can use static, for height use fixed values or just leave an auto option. Always remember to set overflow: visible. Otherwise the thing we want to print could be hidden.
You can also read my short article in order to have a more in depth knowledge on printing ionic based applications: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/
Is there a way to disable the icons in ui-select2? I am using ui-select2 in angular js, which is like adding tags while posting a question on stackoverflow:
How can I disable remove icon conditionally?
Official website of ui select2
[Edit 2018-11-12] You could always do a "display: none" on the x span:
span.select2-selection__choice__remove {
display: none;
}
You could also use that to disable click on it with pure JS.
And there is also a "locked" option: http://select2.github.io/select2/#locked-selections
You can then control, per data, which one can't be removed from the selection.
Could something like this help you?
Remove span tag in string using jquery
It's not a direct answer, and it's not ui-select2 specific, but it should help you understand how to remove certain elements. You can just add a condition and that's that.
This is also works
span.select2-selection__clear {
display: none;
}
So, this is an odd one...
I've got basic pagination code:
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
And I want it all centred, so I'm using inline-block on the anchor tags. Simple enough, stripped down CSS code:
.pagination{text-align:center; margin-bottom:20px;}
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;}
.ie7 .pagination > a{zoom:1;}
.pagination .next,
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden;
background:url(../images/page-arrows.png) no-repeat;}
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e;
background:url(../images/page-numbers.png) left top no-repeat;}
Problem is that, NOTHING is displaying in IE7 (at least IE7-mode of IE9). I'm well aware of the display-inline bugs that IE7 has, but those only apply to elements that aren't inline by default. I've added in a zoom:1 anyway though for good measure.
If I put a background colour on the .pagination wrapper, that wrapper does indeed show up with the background colour, but the elements inside just aren't showing!
I've tried the usual IE 'fixes' ...position:relative, zoom:1, height:1% on any and every element, but not luck.
What am I missing?!
After some experimenting in JSFiddle I've managed to discover that the problem relates to this particular rule
.pagination .prev {text-indent:-9999px; }
Disabling this fixes the issue but is not ideal as you would then have the text charecter appear on top of your background images.
Interestingly enough your .next does not cause the same issue. with that in mind added an to either side of your paging control (so your center alignment dosnt get skewed) and it seems to of fixed the problem.
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
JSFiddle available here (background images replaced with solid colors for obvious reasons)