I hate that bootstrap has nullified the fieldset tag and legend.
Q: Is there a way to tell the browser to use the default fieldset & legend rendering without downloading a local copy of bootstrap and removing those lines from bootstrap.css? I want to leave bootstrap.css alone so that I can use a cdn.
I'm thinking of something like the !important flag.
Related
So I have a site and I'm using Bootstrap 3.3.7 and sass. I'm being asked to have a "dark theme" page and the ability to set different types of color themes based on certain pages.
There might be a page with white-label branding, or a dark theme, or a blue theme.
I'm being asked to keep everything else the same.
I'm thinking about having those pages add a class to the body tag that changes the CSS colors, but what are the best practices for changing all colors in a bootstrap 3.3.7 sass style controllers.
Bootstrap colour code are present under variables file(bootstrap/**/_variables.scss) were we can play on it.
But when it comes to theme development best way to handle the colour is we can have separate scss for colour code, where the folder or file structure can be followed like bootstrap or as per the developer style.
Can anyone explane if it is possible to use font-awesome or another big icon font with Element UI? I've seen FAQ but cannot make it work for me.
https://github.com/ElemeFE/element/blob/dev/FAQ.md
Thanks.
You can just include those libraries / or NPM them and they work, Element UI has a limited set of icons so I have include vue-awesome (font awesome) but I notice the position of the icons if out a bit so you need some CSS to adjust top margins (I needed -4px) and line them with say button text.
I'm using Bootstrap 3 and have set the content to display in 2 columns using CSS column property. I know this could be done with Bootstrap, but in this case, it would be better to use CSS columns.
BUT
At least in IOS (Chrome or Safari) the content is not visible at all. If I comment the Bootstrap tags, the content is visible and the CSS columns work fine.
Any ideas?
EDIT (added examples, thanks to Christina ;) )
In this document everything works fine in desktop browsers but if you check it with IOS Chrome or Safari, the text in the CSS columns are not visible.
http://aatosmedia.fi/tmp/column.html
In this second document I commented the Bootstrap 3 CSS -file and now the columns are visible also in IOS.
http://aatosmedia.fi/tmp/column2.html
It's caused about min-height: 1px; property to .sisalto css class. Your div it's visible on both pages but on column.html their height it's equals to 1px. Fix it adding some height to your div.
Is there a way to change the width from the grid container in bootstrap theme using IP or should i hack the CSS style sheet?
Can't understand why would you need this. Do you want to have GRID management narrower? Then add your own css file.
CSS can be added using ipAddCss function in ipBeforeController event.
You can add CSS only for particular admin pages. Use ipRoute()->... to get information about current page.
I'm looking for a sample of how to style a list on the results returned from Sencha.
Do I need 100's of line of custom CSS, or are there some predefined styles I need to apply to make my app look native device like?
The default styling should look OK: at least, consistent with the rest of the Touch UI.
Simply provide an itemTpl: property and bind the list to a store: you should see the items appearing in a list like:
You can of course elaborate on the itemTpl as much as you like. There are also some 'standard' UI behaviors such as the disclosure buttons and index bars. See this screencast for examples: http://vimeo.com/19245335
And finally, of course, it's all just HTML & CSS, so you can go completely crazy with the styling if you want. Check: http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/
Use this to make it vertically center aligned always:
.x-list .x-list-item{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
In the default download of Sencha Touch there is a folder called Kitchen Sink in the demos. There's a basic css file in this demo that you can use as a starting point.
Also, you could give the list or nestedlist a class with the cls:'yourClass' and then, in the source of your project, check the nested divs and their classes...
Another option is to use style:'background-color:black;color:white;' inside the component to get basic styling.
Your best bet would be to check out the kitchen sink special css file as it's indented in a right way and very clear to beginners.