I have various Select2 dropdowns. I have a issues where when the input is narrow and the drop down is also very small and hard to read.
I have tired:
.select2-dropdown.select2-dropdown--below {
min-width: 300px !important;
}
Which works great:
I am wondering if there is a way to have Select2 automatically adjust the width?
I figured this out as I was drafting the question - Its a combo of CSS and Select2 configuration:
Select2:
width: 'auto'
dropdownAutoWidth : true
CSS:
.select2-results__option {
white-space: nowrap;
}
.select2.select2-container {
width: 100% !important;
}
The nowrap was the key. That forces the option to be full width and then the Select2 config. My added 100% width was to keep the actual input select full width in the table I have these nested in.
Related
How should the CSS be adapted without setting fix column widths so that all columns are at least as wide as the titles? The only change was the setting of sticky on the table.
On this screenshot only 7 out of 17 column titles are readably visible:
Somehow the width of the regular cells must be specified so that they're at least as wide as the related headers.
This css makes it look acceptable, but still too wide for certain columns:
.projektTable th {
white-space: nowrap;
}
.projektTable td {
white-space: nowrap;
min-width: 180px;
}
I would import an overrides.css file with the following:
th.ant-table-cell {
white-space: nowrap;
}
I am programming a simple movieDB app with Ionic. A part of it is listing actors, who play in a movie as a scrollable vertical card list. I am using good ol' divs and custom CSS.
This is how it looks like in a browser (Firefox 38 on Mac): this is the DESIRED behavior
however when I emulate it on iOS (iOS 7.1.1 on iPad) I get this:
It is scrollable, but the divs overlap. They are collapsed.
You can find my CSS code below. I believe that I have tried a combination of every -webkit tag out there and I still can't get it to work.
Any help greatly appreciated :)
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
align-items: center;
#actor {
height: 30vh;
width: 15vw;
margin-left: 2vw;
padding-top: 12vh;
border-radius: 5px;
text-align: center;
background-color: cornflowerblue;
}}
UPDATE 7:45 GMT 25.6.2015
Thanks to COOOL's answer I am able to track the origin of this behavior, so I am updating the question:
In browsers, overflow-scroll extends the flexbox to accomodate all items with their original widths. However with the current code, iOS just squeezes them all in the original dimensions of the flexbox. If I were to put anything more than 100px they would overlap again (see the code below).
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
align-items: center;
.actor {
height: 30vh;
width: 100px;
min-width: 100px;
However if I set width of #actorsBox to something big (say 2000px) the items are spaced out nicely again.
It seems to me that -webkit-overflow-scrolling is the cause of the issue. Does anyone have some experience with this?
Well, firstly your using a div #id for an area you should be using a .class
a .class is for selecting multiple instances as an #id is for one unique instance.
It looks like you have #actor as the selector of the problematic content. And it looks like your width is being ignored.
You can firstly try using px or % (instead of vw) where you have this: width: 15vw;
Or define a min-width for the actor boxes.
.actor { // firstly change to a class
height: 30vh;
width: 15vw; // mobile browser could dislike this, if below doesn't work try using % or px
min-width: 20px; // or whatever is relevant, may require some testing
/// the rest of your cool styles
}
Update: (re: your comment)
If 2000px on #actorsBox responded well, then you may need to add a min-width there as well. (or at-least define a width)
#actorsBox{
// all your previous styles
width: 1000px; // hows it gonna know when to overflow, bro?
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
// I would add min-width in px then width 100% and a max-width in px
// but declaring a width here is all you need
align-items: center;
}
In any case you need a width defined where you have an overflow-scroll defined. This is likely your issue; if the above still doesn't work try also adding this position:relative; to assure .actor is relative to this as a wrapper
I have an iframe inside a popup for some reason in mobile safari once the iframe loads it's changing the size of the iframe to go beyond the screen dimensions and no matter what I do in inspector the computed style won't update.
The style that inspector shows is taking effect is (and works everywhere else including android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
However, in mobile safari the "computed height" and "computed width" are way off (depending on which popup you initiate) they're up as high as 3000px tall and 700px wide. Inspector does not have the height: 900px or the max-height: 90% crossed out and even if I put style="width: 300px !important; height: 300px !important" directly on the iframe tag the computed values are still going past these values with no indication as to why.
Any clues?
Click on any of the campus tour links (as I said, it works as expected everywhere but mobile safari - even android)
http://www.georgiancollege.ca/new-campus-tours/
In one of my projects, Safari Computed Rules were not matching the Styles Rules. And like, you even adding !important directly to the inline style did not help.
The culprit turned out to be too many transition effects on the page. The transitions were on inputs and textareas (which we manipulated a lot with JS). Changing to this helped me out.
transition: none;
I am new to using syntaxhighlighter. I am using there latest version 3.0.83. Can some one help how to customize the color of comments, header, etc ?
I am using < pre class="brush: c"> for coding style.
The easiest solution would be to override the CSS rules for comments, but they're marked as !important so you have to do a little extra work.
Open your shBrushCpp.js file. Down towards the bottom there's a set of regular expression rules paired with a css property. Those values correspond to class names in shThemeDefault.css (or whatever theme you're using).
Copy your theme file to something like shThemeCustom.css or whatever you want. Include this file on your page instead of the original theme. From here, you can change whatever you want. Just reference the CSS rules from the brush file against your custom theme to know what needs to be changed.
In case you don't have full control over the .css or .js files, as is my case (since I followed these instructions here and am using Alex Gorbatchev's hosted files instead), there is still a way to override the !important parameter.
You can customize any of the settings shown here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), for example, as follows:
With the default theme, this HTML...
<pre class="brush:cpp" title="test code">
int myFunc()
{
//do something
return 1;
}
</pre>
...yields this result:
Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above </head>:
<style type='text/css'>
.syntaxhighlighter {
max-height: 550px;
background-color: #ff0000 !important;
overflow-y: auto !important;
overflow-x: auto !important;
}
.syntaxhighlighter .line.alt1 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #000082 !important;
font-weight: bold !important;
}
</style>
Now, I have set my max-heightto 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is red (#ff0000), my code background color (both alternating lines) is light green (#99ff99), and my comments are blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file--example, for me, here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.
Here is my final result--very different from the default look above:
Note that the font-weight parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.
Is it possible to have a listview within jquery mobile with a filter search but instead of having the normal list we create a card view. So in other worlds we are still adding the <li></li> for the list but we are changing the list css to a class so that it shows like cards and not in its usual way.
Is that possible? do I need to disable some css or added a new class or something to that effect to ensure that the list looks different?
There is one implementation I was using: http://appcropolis.com/page-templates/list-of-cards/
I only hope it was updated to work with jQuery Mobile 1.3
Or you can eve do it by yourself if you know enough css. Only important thing is to change li width to lets say 50 % (pr less if you want margins), set it to float left and and full border around them. And that is that, you can do it on any listview implementation.
Working example: http://jsfiddle.net/Gajotres/NBv9B/
CSS:
.ui-listview li {
width: 44% !important;
margin: 2% !important;
float: left;
border: 1px solid #ccc !important;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}