So, I have many events at the same time (usually 6-9 events).
So the week view, which i am using for my page, shows the events the one next to the other causing shrink and not showing the titles properly.
Is there a way to show the events one below the other and force the row height to stretch?
I tried
/* .fc-timegrid-event-harness {
position: relative;
width: 100%;
display: block;
left: 0 !important;
height: 50px;
} */
but of course the table is not resizing according to my needs
Related
I am NOT a webdev, just trying to fix some already broken CSS. What I'm asking may not be possible.
I'm dealing with a CMS that has a special set of pages that has a column (that isn't present on other pages). This column is identified with a specific ID that won't appear on the other pages.
My question is whether I can have an optional CSS rule that affects a different element (A button that has an absolute position on the page) if the column is present or not. I.e. the button draws at 20 pixels from the right if the column isn't there but draws 150 pixels if the column is there. Is this possible.
FYI due to the limitations of the CMS I can't just have a different stylesheet for these pages, I have to use the same shared sheet as for other pages.
For reference this is the div that I would want to modify if the ID appears.
div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
You can add parent class name or Parent id to apply css like this.
Using Class
.my_parent_class div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
Using Id
#my_parent_class div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
I'm using Angular4 and I wrote a simple a menu that opens horizontally. For unknown reason when "playing" a little with the menu on different zoom ratios, I noticed some black vertical lines that remains after closing the menu. if I change to another window or change the zoom ratio again, the lines disappear, but I don't understand why they are there from the first place.
NOTE:
The behavior is not consistent. Sometimes there are lines, sometimes not. If there are lines they appear on different places. On 100% scale there is no problems at all.
.menu-container {
background-color: #5a5a5a;
bottom: 23.81rem;
left: 1.625rem;
position: relative;
transition: 0.5s;
}
.menu-content-hide {
height: 0;
width: 0;
}
.menu-content-show {
height: 0;
width: 36.06rem;
}
html
<div class="menu-container"
[ngClass]="{'menu-content-show': selectedItem, 'menu-content-hide': !selectedItem}">
<app-menu-content (_onClose)="handleMenuClicked(null)" [_selectedItem]="selectedItem"></app-menu-content>
</div>
In my current app I have a radio field that is sitting in the upper-left corner of the window. I have given this component a class name of 'radio-buttons' and given the following css to the component:
.radio-buttons {
margin-left: 70px;
margin-top: 30px;
border: dotted;
}
The border is dotted just so I can see the outline of the component. Every time I resize the window, the radio button field shrinks small enough so that the buttons cannot be seen at all. The dotted border can still be seen so I know the component is still in the app, it just shrinks majorly. I tried adding:
position: fixed;
to the radio-buttons class, but this has not helped. Any help would be greatly appreciated! [hopefully this is a simple fix]
So, I searched for my question outside of StackOverFlow and found the following link:
http://css.dzone.com/news/how-resize-extjs-panel-grid
This site answers the question 'how to resize a panel' instead of keeping the panel from resizing, but I stole the following line of code and put it in my 'radio-buttons' class:
position: absolute;
and now my radio button field doesn't resize itself on window resizing!
Basically all I had to do is change
position: fixed;
to
position: absolute;
Here's my final css class that keeps the radio button in place:
.radio-buttons {
position: absolute;
margin-left: 70px;
margin-top: 30px;
}
In your CSS, you can specify the minimum width and height for a class or ID. try something like the following:
.radio-buttons {
margin-left: 70px;
margin-top: 30px;
border: dotted;
width: 20%;
height: 20%;
min-width: 50px;
min-height: 50px;
}
This will set the width and height to 20% of the window size, unless that is less than 50px.
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */