I was wondering how would I make a asp.net drop down list responsive. And by that I mean when I am on my smart phone it will format its width to fit the screen, and when i am on a tablet it would do the same and so on.
Any examples would be great.
Thanks for the help
Step 1: Add one or more CSS classes
You'll need to start by adding a CSS class to the dropdown list control (hereafter referred to as 'the control'). This can be done by adding one or more classes to the CssClass attribute in the control. Additionally you should take a look at conditional CSS statements.
Step 2: Add the usual responsive design styles to the class
A basic responsive design style is something like this
.responsiveWidth{width:100%;max-width:950px;min-width:650px;}
Things to remember...
Just remember that when using max- and min-width, it is expected that if you use a percent for width , then you should use an explicit width for max-width and min-width. This goes both ways, so you could do:
.reponsiveWidth{width:900px;max-width:100%;}
...which would keep the control at 900px width unless the screen width drops below 900px.
Bonus Info:
Here are some links that I have in my "Responsive Design" folder in my bookmarks...
Tips
7 Responsive Design Tips to Enhance Your Workflow
How to use conditional CSS statements
5 Useful CSS Tricks for Responsive Design
References
W3C CSS Conditional Rules Module Level 3
Advanced Conditional Statements
Give it a css class and set the width to a relative size. (100% for example)
Related
I have the same content to be displayed on a pop-up and desktop view.
I already used media queries to adjust the content on desktop/mobile view. But in desktop view, the same content needs to be displayed on a pop-up with different margins.
How can I achieve this? Please help. Thank you.
Just add different margin that will overwrite default one based on parent class of the component - in your case it will be pop-up class.
If you do not want to increase CSS specificity - you may try add class modificator (eg component--big-margin) if you are using CSS methodology like BEM.
So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.
What ideas could I use to achieve this?
You can use your own customized Bootstrap css (create one here)
instead of the original/regular one. In the 'Media queries breakpoints' section, just change #screen-xs, #screen-sm, and #screen-md to 1024px and then download the customized version.
Bootstrap is designed to be mobile first and scale up rather than down.
You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.
This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:
For grid layouts, use .col-xs-* classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device grid
scales to all resolutions.
https://www.codeply.com/go/g1dEHU6EOX
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
I am using Bootstrap 3 in my WordPress theme.
Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width.
How would I set this non-responsivity up?
(Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?)
There is a section in Bootstrap docs about disabling responsivness:
http://getbootstrap.com/getting-started/#disable-responsive
Steps to disable responsive views
To disable responsive features,
follow these steps.
Remove (or just don't add) the viewport <meta> mentioned in the CSS
docs
Remove the max-width on the .container for all grid tiers with
max-width: none !important; and set a regular width like width:
970px;. Be sure that this comes after the default Bootstrap CSS. You
can optionally avoid the !important with media queries or some
selector-fu.
If using navbars, undo all the navbar collapsing and
expanding behavior (this is too much to show here, so peep the
example).
For grid layouts, make use of .col-xs-* classes in addition
to or in place of the medium/large ones. Don't worry, the extra-small
device grid scales up to all resolutions, so you're set there. You'll
still need Respond.js for IE8 (since our media queries are still there
and need to be picked up). This just disables the "mobile site" of
Bootstrap.
What about this?
.non-responsive { width: 800px !important; } //or whatever width you want it to be
It's noticeable when using the "Hot Towel" SPA template with Durandal that the views sit in a middle window that's 1100 pixels in width rather than using all the available space.
And yet all the views within the applicationHost are set to use the Bootstrap from Twitter "fluid" styles. Effectively a hard-coded max-width set on the body tag is making all these fluid styles redundant and rather meaningless.
It's easy enough to over-ride the body style set in app.css (assumming there will be no side effects to setting it to a ridiculously high value) but I was just wondering if anybody knew the reason for setting it this way in the template, given that it's undoing all the good work of trying to implement a responsive design that all those Bootstrap "*-fluid"styles are trying to implement.
No particular reason. Feel free to remove it if the layout still appeals to you. You can submit a pull request on github for changes too, as HotTowel is open source.