Going to try my best to explain this as I don't have a working example at the moment.
I've found now with two sites, both using twitter bootstrap as a framework, an odd occurrence regarding the form placeholder element.
Take this theme for example, and note the newsletter form in the footer.
Theme
It uses the placeholder form attribute to label the name and email elements.
Now when viewing on an iPad/iPhone these display fine. Switch the orientation, and it will adjust fine, but then switch the orientation back, (i.e. portrait>landscape>portrait) and it throws the page off and knocks it off to the left. The layout is no longer fixed to the width.
I cannot understand why this is?
Any ideas?
This is a bug with iOS6, resolved in iOS7. Setting overflow: hidden; on the parent element of the input element (for example the form) fixes the problem.
Related
I have A SwiftUI view which is a standard form and in canvas it has the built in IOS form style which is the look I desire.
However this form is being used a SideBar embedded in a UIHostingViewController which is a child of a UIViewController. Everything works as expected however the styling of the form is replaced by that of a normal UITableViewController.
I have not added any code because my struct is a simple form with multiple sections.
Please refer to the images below
Expected Look as it shows in canvas
Actual look after being embedded in UIHostingViewController
I was able to fix this issue by simply changing the widthAnchor of the form and allowing it more size.
I noticed that when I rotated my device and the UIHostingViewControllers frame changed its widthAnchor and the SwiftUI view rendered correctly on screen.
The Form element in SwiftUI is effectively a wrapper around List. The default list style is context-dependent, but if you add a .listStyle modifier that will generally be observed.
You don't have any example code in your question, or indeed a visual of what you expect the form to look like. But I'd hazard a guess that you'd like the form to look like it does in a standard iPhone (not SE) width? In which case you should try
Form {
// your form elements
}
.listStyle(.insetGrouped)
It's possible that the .sidebar list style might also be more appropriate.
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
I am using a DatePicker along with a ListPicker in my Nativescript application. However neither of these elements display correctly. I've had to blank out some sensitive information from the screenshot, but the issue is visible in the DatePicker.
It seems that the values are offset, and I cannot find out what is causing this. Has anyone else come across this issue before? Or have a fix for it?
These elements are of utmost importance to my project.
This happens because the component is inside tag ScrollView. If I remove it, works. I have tried remove padding and margin of ScrollView and nothing.
The inner StackLayout is required for the ScrollView to work properly. If I have more than one element (such as an input form - which is the scenario in my application), only the last element is displayed without the StackLayout.
I have a responsive site design, most of which works just fine.
On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)
If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.
Here is a temp link: http://moymadethis.com/oca/test.html
Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).
Thanks, hope someone can shed some light on a solution for this?
Steve
Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.
select { width: 6em; }
When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.
If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.
I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.
try using max-width on select element
eg #myselect {max-width:95%;}
On iPhone with iOS 15.4.1, I also needed to specify overflow-x:
#myselect {
width: 50%;
overflow-x: hidden;
}
Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.
I have a select menu on a responsive page, which is set with a fluid width (% value). Everything looks fine until i decrease the page size, when the default value of the select menu (i.e when it's not focussed or clicked on) becomes squashed in the container and overflows, causing part of the text to be hidden, like this. Ideally, this needs to be solved.
I was thinking of incoporarting a line-break, using CSS/Javascript whenever the text overflows. However, I can not think of an appropriate CSS property or JS method to do this on a select element. Does anyone have experience with this or know how to solve it? You don't need to use my suggestion, feel free to come up with something else. The main thing is the text needs to be shown in it's entirety all the time on any screen size.
I have a jsfiddle link here, which uses CSS animations to simulate the page size decreasing.