I am using Bootstrap 3. I have noticed a strange behavior that when I use class .col-md-6 on a <div>, it occupies half the area as it should be, but when I use class .col-md-4 on the same <div>, it occupies the whole row.
Below are the attached images.
1) Image with .col-md-6:
2) Image with .col-md-4:
Can anyone tell me how I can resolve this issue?
Try using .col-xs-4. I suspect it's due to the breakpoints since they're stacking....
Related
I’m creating an app and need to make a signup/login page. I added a background using a picture and a zstack and on top I have the text and text fields. The text fields are showing up but not allowing me to add padding as well as there is no title text showing. Please help.my code
Did some more testing to find out that this happens whenever I use a textfield over an image. Not sure if this is a bug or not but it seems to be because as soon as the zstack is removed everything works.
At last ive discovered the issue, the text fields are extending way out of the canvas. Ive fixed the width of the textfield as a temporary solution but still looking for a way to fix this relative to the screen rather than the background as the field extends to the size of the image. Let me know if you can help as im just starting to use xcode!
I think its because the image cause canvas to be much more bigger and you use edgesIgnoringSafearea(.all)
Try to use on the image clipped() method and i think it will fix your issue with the padding.
And also try to add foregroundColor to the test fields
I'm having a problem with Isotope.
Everything seems to work except that, when I filter the items, these are resized in a weird way, as if the items were resized relative to their old width instead of the container width.
I let you see by yourself here : https://codepen.io/anon/pen/RLPbpd (Click on the group of red buttons to see).
I tried to layout after each filter :
$iso.isotope('layout');
and to destroy isotope and then re-init, but nothing solved it.
My .grid-sizer is at the perfect size and all items have the same width..
I really don't know what could be wrong there, so I'd be very thankful if you could help me !
Sorry for my bad English, it's not my main language !
Problem solved.
The problem was due to
fitWidth: true,
in the initialization code of Isotope.
I just removed it and it works.
Please have a look at http://www.bootply.com/133473.
I have at least a couple of problems and I didn't find any solution up to now...
First problem:
The leaflet map is 0px height and the next row is not in the correct position.
Second problem (but maybe it is related to the first one):
On a small device the width of the map is the full width but I'd like to have a margin and I wasn't able to get it (I tried but margin-left, margin-right and padding-left, padding-right...) and of course the text row is superimposed to the map and that's not what I want...
Looking at your bootply posting, it looks like your first problem was solved (I see the map so the height must not be 0px).
As for your second problem, it is the Bootstrap Editor that is not able to show your app on smaller screens. This problem may go away when you view your app on its own web page.
I've got theme transitions (entrance and content with a set offset) on elements which overlap. The issue is as theme transitions are bought to the front of the page the elements which are animated unreliably overlap each other causing a nasty transition when it is returned to the correct z-index.
It doesn't seem to matter how the elements are structured in the visual tree or the z-index applied to the element, the issue still occurs.
Any help very much appreciated - Ideally I want to avoid writing storyboards though, I'm happy with the entrance/content transition in this scenario!
I ran into a similar problem myself. Here are some things you can try:
make sure the "correct" z-order observed at the end of the animation is indeed correct. Putting some label on your items should make that clear if the items have the z-order you intended
make sure the items are are added to the control according to their z-order. In case you use binding make sure the items you add to the collection are arranged by their z-index
in case you are using PrepareContainerForItemOverride make sure the logic around your binding is correct
Hope it helps,
Mihai
I decided simular problems with:
Position: Relative;
Transition: All... (All includes Z-Index)
I made Z-Index:4 and for "HOVERed" elements Z-Index:2000.
I've implemented flexslider before, but this time it is not resizing when I view it in i-phone or i-pad. Also its not working when I'm resizing my browser window.
Please suggest any workarounds..
For now I've made it work by adding media query in flexslider.css file.
Thanks in advance for any help.
Finally I got it, the problem was because of Bootstrap framework. Elements with classname "span1/2/3.." in bootstrap don't resize beyond a fix browser width, even when using fluid structure. Because of that my flexslider div was not getting resized.
I just changed the fixed with of .span class from "px" to "%" and it started working.