I am using Kendo controls for styling my application, I was able to customize the css of almost all other kendo controls by overwriting default css but I am unable to do that in the case of Kendo datepicker.
I have tried many things but I am only able to change the font size inside the calendar/month view. but the height and width of the datepicker's selection box is too big and that doesn't look good in my page.
Can somebody help me to know how to resize the whole calendar container to be smaller that how it looks now.
I have added a live sample link and an image below for reference.
Live sample - click here for a live sample datepicker simulation
Any help would be much appreciated! Thanks in advance!
You'll have to play around with the values to get it the exact size you want, but this should work:
.k-calendar-monthview .k-calendar-td,
.k-month-calendar .k-calendar-td {
width: 20px;
height: 20px;
inline-size: 20px;
block-size: 20px;
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
font-size: 8px;
}
.k-calendar-view {
min-height: min-content;
max-width: min-content;
}
.k-calendar-th {
width: 20px;
height: 20px;
font-size: 8px;
}
.k-button-md {
font-size: 8px;
}
Related
Is it possible to change the size of the checkbox in an Angular Material Selection List? I've tried changing the size of the mat-pseudo-checkbox in CSS but that results in the checkmark not being placed properly:
mat-pseudo-checkbox {
height: 10px;
width: 10px;
}
Is there another selector that I need to adjust to correct this?
With Angular 7 I succeeded with:
mat-checkbox ::ng-deep .mat-checkbox-inner-container {width: 30px;height: 30px;}
Yes, the checkmark is just a pseudo element within the checkbox. You can override it's styles the same way as with the box itself.
For your case with the 10px box size the following CSS would work (for other sizes the values need to be adjusted):
.mat-pseudo-checkbox-checked::after {
top: 0px;
left: -1px;
width: 6px;
height: 2px;
}
I was facing the similar issue and tried the below CSS, which seems to work in Angular 8:
::ng-deep .mat-checkbox .mat-checkbox-inner-container {
width: 30px;
height: 30px;
}
I have added a sample width and height; please customize these to what you need.
Recently , i added a button to my mobile app. However , the buttons are displaying differently on mobile screen size.
For an example, when i run it on iphone 6+, the buttons display side by side as show below, But when i am displaying it on iphone 4, the second button is displaying below it rather than beside it.
I used percentage to make it responsive but apparently , something looks wrong with my sass.
for an example , i want the outlook to be as shown in the image regardless of what the screen size is .
this is my sass code
.IonFooter {
button {
width: 48%;
height: 60px;
border-radius: 5px;
font-size: 1.3em;
}
}
Thank you in advance
The behaviour of your buttons is probably caused by the infamous display: inline-block; right margin "bug" (Check this CSS Tricks article about the issue). It could also be caused by padding in the parent element.
Anyway, I suggest that you use flex to avoid having your buttons fall on multiple rows.
.IonFooter {
display: flex;
justify-content: space-between;
button {
flex: 0 0 48%; // Grow: no, shrink: no, width: 48 %
height: 60px;
border-radius: 5px;
font-size: 1.3em;
}
}
I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.
This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).
I originally had the html & CSS shown in:
http://jsfiddle.net/jjoensuu/qSz5x/5/
In an attempt to solve this issue I found the solutions in:
How to make text input box to occupy all the remaining width within parent block?
I created what I think is similar to "wdm"'s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here:
http://jsfiddle.net/jjoensuu/rJ45P/8/
I also tried the solution from "Marty Wallace" in same thread but could not get it to work.
So as a reference to my code on the jsfiddle site, the "topsearch" box gets the width of ~1300 pixels but the "field-topsearch" input field stays at around 156px.
With some of my attempted solutions the "Go" button wraps to the next line below. Any help on how to solve this would be appreciated.
I took a slightly different approach. It appears to me you wanted the input text field to expand but the label and input button to remain the same size either side of the input field. This may well be useful for generating a form containing multiple rows without resorting to table layouts. Also the previous suggestion does not really work very well regarding keeping the elements on one line. This technique would allow the containing 'box' to be resized to whatever you liked at will.
I did have to tweak your html a little, but I feel the label should be next to the element it is related to anyway. I have also left out the form html for clarity since that is not part of the layout:
<div class="input">
<label for="field-topsearch">Search</label>
<div class="value">
<div>
<input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
</div>
<input type="submit" class="button-start-search submit " value="Go!"/>
</div>
</div>
And the css:
.value {
position: relative;
}
.value>div {
margin-left: 60px;
margin-right: 40px;
}
label {
position: absolute;
top: 0px;
left: 0px;
}
input.submit {
position: absolute;
top: 0px;
right: 0px;
}
input[type="text"] {
width: 100%;
}
The fiddle is available here
Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/
CSS
.topsearch
{
height: 40px;
line-height: 35px;
padding-right: 10px;
width:100%;
display:table;
}
.topsearch label
{
color: #c98116;
text-transform: uppercase;
font-weight: normal;
font-size: 0.9em;
margin: 0 5px;
}
.topsearch label, .topsearch form
{
display: inline;
}
.topsearchfield
{
border: none;
height: 24px;
font-size: 15px;
width: auto;
}
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
{
display: table-cell;
}