I have a responsive Panel that in Mobile becomes scrollable because the dropdown text content is too long.
Mobile dropdown (at least in iOS) only displays a portion of the selection anyways when you select the dropdown.
What's the best way to handle this?
Sample Bootply Here
This is more of a styling issue for IOS rather than Bootstrap, but it looks as though you just need to add an optgroup tag after your last option:
http://www.bootply.com/Xw8pzjoACx
Set the dropdown width in CSS to 100% to stop it overlapping the container.
Related
I am making my first responsive webpage. It's desktop-first, and since it's a simple one-column page I need only one media query, for mobiles. I have a different nav bar for the desktop from the mobile. So I put both navs in the HTML. I set the nav that is for the mobile to "display:none" in the main part of the css, which makes it disappear from the desktop version. I set the desktop's nav to "display:none" in the query, which makes that nav disappear from the mobile.
The trouble is that I can't make the mobile's nav visible again in the mobile version. How do I undo "display:none" in the mobile query?
(The page is http://www.birdwatching.com/optics/2018_Kowa_scope/kowa-tsn-553-review.html)
Inside the mobile media query do display:block for the mobile nav that you hid, and display none for the desktop nav.
If you use visibility:visible and visibility:hidden instead, you won't have to worry about what the display of the element was previously set to
display:revert will set the display setting to its previous value. This way you don't have to worry about what display type (e.g. block, flex, etc.) it was before it was hidden.
More reading
https://developer.mozilla.org/en-US/docs/Web/CSS/revert
https://css-tricks.com/what-does-revert-do-in-css/
I have been able to center elements with margins equal on both sides in mobile without using bootstrap.
My landing page, however, I have used boostrap columns and centered them. I run into problems with mobile portrait display. Landscape display looks fine, everything is centered.
What I have tried:
-setting width to word container and box to 280px and shrinking my navigation menu accordingly.That didn't work.
I am thinking it might be that I have a width for col-centered of 500px which might be what is wrong.
My site can be viewed # http://lewisdesigns.github.io
the link for your project "www.lewisdesigns.github.io" not working. ok
not an issue but i will like to tell you to remove margin-left and
margin-right and add
"margin:0px auto;"
to css selector of each element (e.g. class/id); besides you can also
try for
"float:none; text-align:center;"
in this case.
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/
I believe everyone would have seen, facebook mobile app. Also in many flat UI patterns website.
I would like to make one such Left menu.
THis is what I did now.
Hide the menu initially (display:none)
On click of the menu button. Show the left menu (toogle), and increase the left margin on main content using javascript (style,maregin-left:100px;)
This is working fine, but I just want to know, is this the best practice, and will this responsive?
The design pattern is known as 'off canvas' layout.
Depending on the nature of the content you might not want to have it hidden on larger screen, depends on your requirements.
There is a good example of what I mean here: http://jasonweaver.name/lab/offcanvas/
Where the navigation is visible on full screen and hidden on smaller mobile viewports.
what you re doing is good but for best practice i will use the css3 transform with translate some thing like this
.menu{ -webkit-transform:translateX(-200px)
from there you can use the toggleClass("active") from jquery
.menu.active{-webkit-transfrom:translateX(0)}
hope this help!
Yes, this is a perfectly fine approach and it should behave responsively since it's only taking up 100px of width. If it was a full screen horizontal drop-down menu, then you would have to make sure its contents are responsive, but a 100px wide vertical menu will be fine on just about any resolution (especially if the user can choose to toggle it open or closed).