I am trying to increase the width of textbox(input) which has applied bootstrap 3 styling in my project.
The size is increasing in the Link but when I try to run this code in Visual Studio designer it is nor increasing the width of the text box.
In a default Asp Mvc web project they add a default stylesheet file in the Content/ folder called Site.css
This file has the style
input,
select,
textarea {
max-width: 280px;
}
This is for the horizontal form in the default t4 templates.
If you remove that it should work as expected
Related
The default template/project that is used for a MVC 4/5 web application re-sizes according to your screen size. If you are on a tablet or phone it will re-size the text/layout when you manually re-size the screen. Is there any easy way to just turn this off or do I have to create a new project with my own css? I would like the template to stay at a fixed width.
Mvc5 templates used bootstrap.
From bootstrap page: How to disable page responsiveness
Omit the viewport mentioned in the CSS docs. In your razor layout remove:
"<meta name="viewport" content="width=device-width, initial-scale=1.0">"
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; 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, remove all navbar collapsing and expanding behavior.
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.
i am trying to override the opacity of ui-disabled in my app to have a not focusable textfield with white text that i can change per js (<disabled="true">).
i don't know if it will work on all browsers with the opacity set to 1
or how to use the suggestion on this page exactly (on mobileinit or as a css-file and how about the semantics):
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
You can override jQuery Mobile's CSS with your own. Include a stylesheet after jqm's in your html, or use a style=... attribute on your html tag — either will override the default. Hence the Cascading in Cascading Style Sheets.
I highly recommend using the developer tools built into most browsers. In Chrome, for example, right-click anything in a web page and select Inspect Element. It will show you the computed CSS for the element, including which styles came from which CSS file, which were overridden by other stylesheets, etc. You can even edit the styles in the tool and see what changes would look like.
Here you can see the stylesheet f.css overrides several properties from the jqm stylesheet, which sets them in several places and overrides itself with various classes:
I'm using twitter bootstrap. boostrap declared in my master page. But i need some form do not use boostrap style.
How to stop boostrap into some div or form?
My target is
You can devide your bootstrap CSS to 2 different CSS. The one will have the general CSS for all the website and the second one will have only buttons grids ... e.t.c . So Once you need it you just add the general CSS into your webpage or you remove it if you don't really need it
The general styles are between line 1-176 for bootstrap.css
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I love the way jquery mobile renders a form, is it possible to embedded a jquery-mobile-form in a table, div or any container in my webpage?, to be clear: I have a html5 webpage anf the layout is done by divs and css, is it possible to include a jquery-mobile-form in one of the divs.
I have been tried to do that but jquery-mobile-form always takes the 100% of the page, I want to use the form in an specific high/with div container, is that possible?
Thanks!
Yes, you can adjust the size of this forms like any other div elements.
Just wrap the form in a block element and apply the css "width"-attribute on it.
I created a Fiddle for that:
adjust jQueryMobile form size fiddle