Basically, using bootstrap 4, i'm trying to take the bootstrap class "custom-select" and override some of the bootstrap elements for my own uses. Here's the html and scss im using. Pretty simple stuff imo.
<select className="custom-select" id='sortingSelect' onChange={(e) => setSortingOption(e.target.value)}>
<option defaultValue value ="0">Random</option>
<option value="1">A - Z</option>
<option value="2">Z - A</option>
</select>
.custom-select#sortingSelect{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
It straight up would not work when i put it in the "module.scss" for that page i was working on, so i ended up having to put it into my custom.scss that globally overrides stuff. Even when using !important tags, it still wouldn't work in my module.scss, but it does work with my custom.scss. That's problem solved, well, kind of.
Because! I want it to also be able to change with screen size, this is bootstrap after all. So i put the following into my custom.scss
#media (max-width: 768px) {
.custom-select#sortingSelect{
float: none !important;
display: block !important;
margin: 0 auto !important;
}
}
It doesn't even seem to recognize this input at all for some reason :/
Are media queries simply just not allowed in the custom.scss file? If that's the case am i just boned? Or am i just going about this all wrong? It could be some issue with specificity, but how the heck do i get more specific than what ive already got?
Please lemme know if i need to provide more context!
Also! I read that i need to include the following code in my html
<meta content="width=device-width, initial-scale=1" name="viewport" />
However, i am using React, so i included it in the html that is returned from my Layout component that renders everything else, still no luck, and that wouldn't make sense as the problem anyhow, because media queries have worked before in that very same file, just not with overriding bootstrap stuff. Overriding bootstrap stuff always seems to be way more difficult than it needs to be in my experience so far.
Edit: I tried using bootstraps built in break points, but that failed as well
Why are you using both class and ID at the same time in your CSS file.
Either use className or Id for CSS.
Like:
.custom-select{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
OR
#sortingSelect{
Height: 5% !important;
float: left !important;
margin-left: 5% !important;
}
Related
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
I've been using one particular front-end framework for mobile apps for quite sometime but I won't mention the name here because it is irrelevant to my question. I've tried its other competitors, but none piqued my interest.
Particularly they all seems hard to customise with Bootstrap templates.
Bootstrap IS responsive and now mobile first, but it needs additional library to make it more native looks and feels.
So I think, may be I should try small libraries working together with Bootstrap.
I am looking into library/code that will make my web-based, Bootstrap apps feels and looks native to smartphone/tablet.
Here I list what I think are supposedly the right behaviours to have:
1. Fast click
This one I already know the library: Fastclick.
2. Hidden Scrollbar
Maybe this one is sufficient? JS Fiddle:
Javascript
var parent = document.getElementById('container1');
var child = document.getElementById('container2');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
CSS
*{margin:0;}
#container1{
height: 100%;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#container2{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 0px; /* exact value is given in JavaScript code */
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
3. Disabled Zooming
Is this sufficient?
<meta name="viewport" content="user-scalable=no"/>
or should I use this?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
4. Ability to Include partial .html page (for fast loading, particularly a shared <head> tag):
Please suggest library or code
Please leave comment if you think I should add more behaviours. For now, these 4 behaviours are what I'm looking into.
FYI, I've tried OnsenUI with AdminLTE (Bootstrap Template), almost successful, but the scrollbar behaviour is bad. (showing when not supposedly shown, and the scrollbar looks is not that of native.
I must remove page break while generating pdf by visual force pdf, but whatever I try with css page-break-inside: avoid;, page-break-before: avoid; etc. is not working.
I want to remove all page breaks making it a continuous pdf page, but I cannot figure it out.
Instead of using CSS styling for the APEX component, try a div tag around the APEX components you want to not be broken apart with style="page-break-inside:avoid;"
//div style="width:100%;page-break-inside:avoid;"> APEX ///div>
This css page-break-inside: avoid;, page-break-before: avoid; works only when you need to iterate on components. If you are using inline pre-built css into page then you have to check following css related to body tag. like this:
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
Here I am using width and height with auto value.
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.
Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.
I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au
The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.
My stylesheet links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:
#media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
#media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.
Any ideas on what I'm doing wrong here?
EDIT:
Here are screenshots of what it's SHOULD look like at a small screen width:
And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:
Sorry to answer my own question, but I found something that worked.
There was an error with the way I set up the media query. Instead of
#media screen or handheld(max-width: 995px)
I changed the query to
#media handheld, screen and (max-width: 995px)
as suggested by this guy: https://stackoverflow.com/a/996820/556006
and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.
displaying the full website with lots of really squished and unflattering content.
This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.
To target something like an iPhone 4 you need a max-width of 960px (that's why bootstraps default is at 960) for landscape and 480px for portrait.
Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.