My issue is trying to align my radio buttons so that they appear to the left of the text inputs on my form. After tweaking with CSS other week I got it working, now Ive reopened it and they are all misplaced again.
so if follow to this jsfiddle and follow these instructions to get to where I am having the issue:
select multi choice
enter a number in 'No of options'
you should have a number of text inputs appear along with a radio button for each, I wish to align the radio button just to the left of the input.
Could somebody please tell me what the issue is?
many thanks,
The problem is you are setting width: 250px; on your input. That includes these radio buttons. Since radio inputs don't support the width property, they are appearing centered and stretching that area.
Remove width: 250px for these radio buttons and adjust the styles from there.
Related
I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
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 have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.
My actual code (I cannot paste here my code for security reasons) has:
The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.
The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when
the pop up height is less.
The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.
If i did not apply jquery ui select menu, it´s working as expected.
Please find the below images for reference.
1.When having enoug popup size.
2.when popup size is less ,select is hiding.
3.What i am expecting.
Please suggest me what i can do to solve this.
Add CSS property overflow-y:visible on the main popup div:
This will make the inner content that is outside the main div top/bottom bounds to be rendered.
popupSelector {
overflow-y: visible;
}
Here is the documentation about overflow-y
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.