Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
Related
I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.
See the following link: http://www.howru.nl/preken/new/test3.html
For some reason I keep getting space at the right of the three main buttons.
To better identity this on this forum, I've enabled the border of the relevant table temporary.
The issue is inside the following class I reckon:
.button
{
display: block;
width: 350px;
height: 135px;
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration: none;
background-position: top;
color: #FFFFFF;
}
The specified width is the actual width of the background image.
The full CSS sheet can be found at http://www.howru.nl/preken/new/styles.css
Right column (text) should float at the right, as is the case currently. Left column (buttons) should float at the left (as is currently the case), and the center picture should float in the center. Strange thing is the left column takes more space in the table, while none have a fixed width.
Ideally I don't want to specify a width of a column twice (for the TD and for the content, in case of a BG image on the display-block'd content); in the proposed solutions below the display-block'd has a width specified (width of the background image) and the parent TD element as well... That is what I don't like and for which I started this post. Because I still don't understand why the TD's aren't equally sharing the available table space:
Now column 1 (left) seems to take the most, while it doesn't need so much, the second takes a little less, and the right column takes only what was specified for the inner width, whilst the left (1st) column has the same (width specified for the content instead of the TD) and does not stick to that width apparantly, while the right TD does...)
Both in IE as Opera I get this; any idea what I am missing??!
Goal is to understand what is happening, and why. So I'm not looking for a cheap fix - as one can thing of 100 'ugly' ways to do this.
here are the changes i have made. Try this. Btw you should use % instead of px
.top {
vertical-align: top;
width: 350px;
}
removed float from .blkright
.blkright {
}
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}
.column {
margin-left: 12px;
overflow: hidden;
width: 325px;
}
Change right table .top .column width in the to change this space to right of buttons
.column {
overflow: hidden;
padding: 5px 5px 25px;
width: 290px;
(originally width was 250px) because it is trying to fit the width: 100% you have set
you can also remove the 250px , since the right column is the only column you've set a width on
I am not ultimately sure how you want the rest (e.g. the text paragraph) aligned then, but here is my approach.
First, give each body-column a class or an id. You assign these classes to the three <td>s respectively.
.content-left {
float: left;
}
.content-mid {
float: left;
}
.content-right {
display: table-row;
}
Although this solution takes a bit more effort than IanO.S.'s, this solution is also more dynamic. If your button or image sizes change someday you don't have to hack into your code, find and edit your pixel-widths.
Add declaration of width on the first table cell
.top:first{
width: 364px;
}
and you wont see any spaces anymore
I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.