I asked the following question earlier and #topek answered it perfectly. However, I thought I would be able to split the buttons (float: right and float: left), however, my efforts to do so failed.
Basically in addition to the buttons showing up at the bottom of the div in the same location through the entire wizard process I would also like the buttons to show up on either side of the fieldset. I should note that there is a beginning wizard screen that only includes the "Next >" button (a href) and an ending screen that contains a "< Back" button (a href) and an input button "Finish". I would like the "Next >" button to show on the right hand side always (as well as the "Finish").
Please see the following fiddle: http://jsfiddle.net/HcAVX/
Any help is appreciated!
Simply position your buttons:
http://jsfiddle.net/thomas_peklak/HcAVX/1/
Related
I am developing a React app using Material UI. I am having an issue with one page of the app.
That page contains some text and a button, which are vertically aligned with one another. It also contains a second piece of text and a second button, which are vertically aligned with one another and which are initially hidden. The first button can be used to reveal the second piece of text and the second button. The second button can be used to conceal the second piece of text and itself (i.e. the second button).
Here's a link to a screenshot of the page with the initially-hidden content visible (I don't have enough StackOverflow rep points to embed an image yet).
react-material-ui-app-page-screenshot
The issue I'm having is:
When I click the first button (i.e. the "SHOW" button), then click the second button (i.e. the "HIDE" button), then click the first button again; the first button jumps across the page. More specifically, it goes from having its right edge touch the right edge of the <body> element, to having its left edge touch the right edge of the preceding piece of text.
Once the button has jumped, when I resize the browser window (e.g. by clicking and dragging the Chrome application window), the button returns to its original location.
Note: The jumping happens in Chrome, but not in Firefox.
Do any of you know why that is happening?
I created a demo of this phenomenon on CodeSandbox. Here's a link to that demo:
https://codesandbox.io/s/mui-hidden-grid-item-jump-4wsft
Upon a closer look, it appears to have to do with having flex-wrap: wrap on a display: flex; flex-direction: column;.
wrap={"nowrap"}
...fixes it.
See it here.
It's difficult to say if it's a bug or not. What should we expect from a flex column container with flex-wrap:wrap and without a set height, in terms of column width?
Because the correct behavior might be to shrink the column as much as possible.
The bug is that it renders differently in different contexts. Whatever the correct behavior is, it should be consistent.
You can prevent the behavior by adding a width to line 19.
19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>
I am using two different plugins for two button. I want to move one button next to another button. It seems like two button are in two separate divs. So how can i move one button to the div of another button.
It will be better if you provide us your HTML structure for you both button divs.
Here I assume that, following are the HTML structure for both the buttons:
<div class="button1_div"><button>Retail Enquiry</button></div> // html code for button 1
And
<div class="button2_div"><button>For Product Enquiry</button></div> // html code for button 2
As you can see, I have given class to both the divs.
If,my html structure matches with yours, you can add the following jQuery code for that particular page:
jQuery(document).ready(function(){
// condition to check both the divs are exists or not
if(jQuery('.button1_div').length > 0 && jQuery('.button2_div').length > 0){
firstButton = jQuery('.button1_div').html();
jQuery('.button2_div').append(firstButton); // this line will add button at the end of div. So your result will be "For Product Enquiry" and then "Retail Enquiry".
jQuery('.button2_div').prepend(firstButton); // This lie will add button in beginning of div. So your result will be "Retail Enquiry" and then "For Product Enquiry" buttons.
jQuery('.button1_div').html(''); // this line will remove <button> from first div, but it will keep empty div
jQuery('.button1_div').remove(); // this line will remove the first div.
}
});
You can also use .insertAfter() or .insertBefore() functions as per where you want to add the button.
Again, if you provide your HTML structure, we can provide you accurate answer.
Please let me know if you need any further help in this.
Thanks!
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.
On my web site, http://tinyurl.com/yhvj6g
Why is it that Internet Explorer is placing my "Find listing" submit button on a new line whereas Firefox & Chrome keep the submit button inline horizontally with the input field (which is the desired result)?
I would like Internet Explorer to behave the same as Firefox & Chrome in that it keeps the "Find Listings" submit button horizontally inline with the input field.
I assume this is a CSS issue. Any help would be appreciated. Thanks
try setting width on that button so that textbox + button + padding < 400px (size of your container). Seems to me that the button slips to the second line simply because it's too wide to fit on the same line
Looking at both, the button is significantly wider in IE than in Firefox. I'd guess that it's too wide to fit in the available space on IE, and is getting moved to the next "line". Try reducing the padding to 0 on the button and see what happens; also, you might put the form inside an explicitly-sized div to force enough room.
I figured it out. My FORM width was not wide enough