Can someone tell me how to change the width of my React bootstrap button?
I am just playing around with it
I've imported the Button component from react-bootstrap which I've added
import {Button, ButtonGroup } from 'react-bootstrap';
The button seems to have a max width of 100. How can I increase the width of the button to 200 for example?
<Button
class="btn btn-outline-primary mr-xl-5 w-100"
...
>{ctrl.label}</Button>
When you use the w-100 class, you are setting the button to be 100% of the width of its parent element.
Let's assume that the parent element is a set width, (say 100px). If you set the button to be 100% of the width of it's parent, then the button will be 100px wide too. You cannot set a width wider than 100%.
To get around this, you can make the width of the parent element wider (by setting it to say 200px). Then, the button will stretch to fill the parent and will be 200px wide.
Let me know if that helps!
Related
I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
how can i set the width for a toolbar button?
I've set it in the XUL and trying with the js but none of theses methods works using the
document.....setAttribute("style","width:50px")
How can i do that?
Thanks.
Having something like this:
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="toolbarbuttonID"
image='chrome://yourExt/content/images/logo.png'
class="toolbarbutton-1 chromeclass-toolbar-additional"
</toolbarbutton>
</toolbarpalette>
You can set the image size inside your css file:
#toolbarbuttonID .toolbarbutton-icon {
width: 50px
height:16px
}
If you want, you can also add an image of the height and width desired and add it as the button's image. It will stretch the size of the button:
I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.
I have a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html