I have a popover that appears to the left of a label:
$('label').hover(function () {
$(this).popover({
offset: 10,
placement: 'left'
}).popover('show');
The popover is currently blocking a radio button and I want to move it left, say, 10px. I can't seem to figure out how to do this. offset seems to do nothing at all (If I add 10 or 10000 it doesn't make a difference). Here is the HTML for one such label:
<label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label>
I can try to set the popover position by overriding the class in CSS with something like:
.popover {
left: 380px !important;
}
but this is far from ideal as it appears in different spots using different browsers.
There must be a way of adding a small right margin, yes?
Thanks.
It seems rather impossible to style a single popover, and - as Sara mention - there is no such option as offset (you may think of qtip?). However, you can use the undocumented option template, "derived" from the tooltip options (in fact, popover only introduces content).
By modifying template you can individually style each popover! It seems to me your problem is the arrow more than the popover itself, so you can try to move the arrow up or down from the middle, simply by adding a style for arrow to the template, like this
$('label').hover(function() {
$(this).popover({
placement: 'left',
template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).popover('show');
});
of course, here the arrows for all popovers set for all labels will be modified due to the $('label').hover, but popovers can be styled individually without CSS if you want, those without radio buttons may not need to.
UPDATE - style the whole popover +10px to the left
...
template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...
Try this to add the right margin:
.popover.left{
left: calc(100% - 10px) !important;
}
You can add data-placement='left' to the element.
Related
Is there any way to make the new "Sign In With Google" button responsive? Specifically, vary the width based on the width of the containing element? I'd really just like to set the width to 100%.
I'm aware I can set the data-width attribute but this sets it to an explicit width and doesn't update if you change it after the initial script load - you have to reload the whole script to resize the width.
This isn't a perfect solution but it works for us. We're using Twitter Bootstrap.
The new JavaScript library has a renderButton method. You can therefore render the button multiple times on one page passing different widths to each button using something like this (400 is the max width allowed by the library)
private renderAllGoogleSignInButtons(): void {
this.renderGoogleSignInButton(document.getElementById('google-signin-xs'), 400);
this.renderGoogleSignInButton(document.getElementById('google-signin-sm'), 280);
this.renderGoogleSignInButton(document.getElementById('google-signin-md'), 372);
this.renderGoogleSignInButton(document.getElementById('google-signin-lg'), 400);
this.renderGoogleSignInButton(document.getElementById('google-signin-xl'), 400);
}
private renderGoogleSignInButton(element: HTMLElement, width: number){
const options {
type: 'standard',
....
width: width
};
google.accounts.id.renderButton(element, options);
}
We then use the display classes from bootstrap to hide/show each button depending on the size.
<div class="mx-auto" style="max-width: 400px">
<div class="d-none-sm d-none-md d-none-lg d-none-xl">
<div id="google-signin-xs"></div>
</div>
<div class="d-none d-none-md d-none-lg d-none-xl">
<div id="google-signin-sm"></div>
</div>
<div class="d-none d-none-sm d-none-lg d-none-xl">
<div id="google-signin-md"></div>
</div>
<div class="d-none d-none-sm d-none-md d-none-xl">
<div id="google-signin-lg"></div>
</div>
<div class="d-none d-none-sm d-none-md d-none-lg">
<div id="google-signin-xl"></div>
</div>
</div>
We use a wrapper container with mx-auto and a max-width to center the buttons but you don't have to do this.
Our actual implementation is slightly different than the above as we're using Angular and the button is a component but you can get the idea from the above.
The only drawback with this method is that the "personalized button" doesn't seem to display for all rendered buttons but it doesn't seem to affect their functionality.
This answer is based on the new Google Identity Services.
You could try listening for a resize in the window using the resize event, then re-render the Google Sign In button on change. The assumption here is that the container will respond to match the window size:
addEventListener('resize', (event) => {});
onresize = (event) => {
const element = document.getElementById('someContainer');
if (element) {
renderGoogleButton(document.getElementById('googleButton'), element.offsetWidth); // adjust to whatever proportion of the "container" you like
}
}
renderGoogleButton(element, width) {
const options = {
type: 'outline',
width: width
}
google.accounts.id.renderButton(element, options);
}
I've also had better results when the button is centered, not left aligned. The following in Bootstrap:
<div class="d-flex justify-content-center">
<div id="googleButton"></div>
</div>
NB: The max width for the Google button as of the time of writing is 400px, so bear that value in mind as the limit.
I did a workaround, and it worked for me. As I needed the button to have 100% width in mobile devices.
If you have another element on the screen that behaves the same way you need (like having its width 100%), you can select it using a querySelector, and get its width element.clientWidth, after this you can pass the width to the renderButton function provided by google.
But this solution is not valid if you would like the button to change its size on resizing.
I used transform: scale like this in the CSS:
.sign_in_btn_wrapper {
transform: scale(1.5, 1.5);
float: left;
margin-left: 20vmin;
font-weight: bold;
}
Then, instead of wrapping it as I intended, I found that it was fine to just add the class directly to the goog div:
<div class="g_id_signin sign_in_btn_wrapper"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
data-width="250">
</div>
By fiddling with combinations of data-size and data-width, along with the scaling factors, I was able to make it the size I wanted. You can use CSS media queries to adjust the 'transform: scale' values so that it is 'Responsive' to the display size of the user's device. You could also use other trickier methods by having JS tweak variables in your CSS that are then used to set the scaling factors.
Good luck. You'd think it'd be in the interest of these big 'sign in with' providers to get together a coordinating working group to make it easier for web site developers to make all the sign-in buttons the same damn size -- you know they'd rather not have their button come out smaller, and pages look better when things are uniform. And what's with only having dimensions in pixels? At least give us vw, vh, and my favorite: vmin. (Using vmin to set things like font size means you can often skip more tedious RWD contortions and call it good enough.) </end_rant>
I'm new to React.
I'm trying to create 2 different styles of Modals with the React-Bootstrap Modal component: one with an orange header, and another white header (aka no header).
2 types of headers img
The style of modal used depends on where it's used. For example, I want the white header to appear for sign in and sign out, and only those 2 modals. Right now, the .modal-header CSS seems like the default style applied to any declaration of Modal.Header. My modal-header class has styling for the orange header:
.modal-header {
color: #fff;
background-image: linear-gradient(255deg, #f9b25e, #f17b30);
}
I don't want this style applied to the sign up and sign in modals. I tried creating this new CSS ID modal-no-header and adding it to the Modal.Header declaration in the signup and signout js files:
in my CSS:
#modal-no-header{
background-color:#fff !important;
}
in SignupModal.js:
render() {
return (
<Modal show={this.props.showModal} onHide={this.props.closeModal} >
<Modal.Header id="modal-no-header" closeButton>
</Modal.Header>
<Modal.Body> blah... <Modal.Body>
</Modal>
)
}
However, the #modal-no-header styling isn't overriding the default .modal-header class:
not working, inspect element screenshot included
Question: Is this the right way to specify multiple styles for Modal components in React-Bootstrap? If not, is there a better method and how do you go about it? I checked out the documentation but wasn't able to spot anything helpful. Thanks in advance.
Essentially what the title says - need to make this wider. Tried several solutions, neither work. Note that the "backdropClass" is applied perfectly and works, but the windowClass doesn't, nor the "size" option. I have tried them independently, nothing. CSS is in the same folder as the working backdrop class"
$modal.open({
templateUrl: 'myTemplate.html',
controller: 'controllingControllerCtrl',
backdrop: 'static',
backdropClass : 'blackBackgroundModal ' +
'blackBackgroundModal.fade blackBackgroundModal.fade.in',
windowClass: 'resizeModalWindow' +
'resizeModalDialog',
size: 'sm'
});
}
}
CSS:
.resizeModalWindow .resizeModalDialog {
width: 5000px;
}
What needs to be done for at least the "size" option to register - I don't really need custom widths.
Edit: Forgot checked links!
Checked this Q first
Then this
And of course docs
bootstrap css has media queries defining the width of a modal based on screen size. to globally overwrite them use !important
like this
.modal {
size: 5000px !important;
}
You should have white space between those two classes will recognize by the css rule.
windowClass: 'resizeModalWindow ' +'resizeModalDialog',
^^^added space here
Add this to your CSS:
.resizeModalDialog .modal-dialog{
width: 5000px;
}
Add the property where you instance the modal
windowClass:'resizeModalDialog',
windowClass will not resize another way.
In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.
It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.
Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.
Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.
The code I'm using there:
<div class="fbheader">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
<fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->
Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.
I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx
Simply include this in your stylesheet:
#fb-root > div { left:0 }
It's a bug with facebook. Why don't you just update your fbheader class as follows:
.fbheader {
overflow:hidden;
}
That should solve your issue ..
Good luck..
I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:
#fb_like .fb_reset {
/* fix for Facebook bug which causes horizontal scrollbars in browser */
display: none;
}
I fixed the issue using #fb-root { display: none; }
You could try alter the width of fbheader class in css file, or even better, the parent element.
Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.
Another tip is to reposition the button, or set the margins and padding narrow.
My solution is to apply this to the parent container:
.my-parent-wrapper {
display: inline-block;
overflow: hidden;
}
skipping overflow rule will work too
I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.