KendoWindow doesn't have configuration options to set the window header height, and I cannot find a way to do that manipulating CSS. Any ideas?
The selector is k-window-titlebar but you might have to use important for some of the attributes. Define the CSS style as
.k-window-titlebar {
height: 60px !important;
color: white !important;
font-size: 30pt !important;
background: red !important;
}
A snippet...
$(document).ready(function() {
var window = $("#window");
window.kendoWindow({
width: "450px",
title: "About Alvar Aalto",
pinned: true
});
});
.k-window-titlebar {
height: 60px !important;
color: white !important;
font-size: 30pt !important;
background: red !important;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="window">
<p>
Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.
</p>
</div>
You can do this in your css
.k-window-titlebar {
height: 50px;
line-height: 50px;
vertical-align: middle;
}
Related
I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.
My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.
Added the below custom code under /resource/static/swaggercustm.css. But no changes.
.swagger-ui img {
content: url('/static/css/mylogo.png');
width: 140px;
height: 40px;
}
Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.
Can somebody please help me here to just modify the logo? How to override the logo properties?
Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.
If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox.
Since its HTML, you can change ICONS and the look of it however you want.
resources/static/new_swagger.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" >
<link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
.top-nav-bar{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
overflow: hidden;
background: #333;
padding: 15px;
}
.nav-bar-icon{
margin-top: 1px;
float: left;
display: block;
text-decoration: none;
}
.nav-bar-title{
float: left;
display: block;
text-decoration: none;
margin-top: 7px;
margin-left: 10px;
font-size: 18px;
color: #ffffff;
font-family: sans-serif;
}
.nav-bar-select{
width: 30%;
float: right;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border-radius: 2px;
border: none;
background: #fafafa;
color: #3b4151;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select.classic {
background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-nav-bar">
<a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
<a class="nav-bar-title"><b>X name</b></a>
<select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
<option value="./swagger.json">X service</option>
</select>
</div>
<div style="margin-top: 100px" id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
<script>
function changeSwaggerUI(){
let selected_service_swaggerURL = document.getElementById("service-selector").value;
loadUI(selected_service_swaggerURL);
}
function loadUI(swaggerJsonURL){
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: swaggerJsonURL,
validatorUrl: "",
dom_id: '#swagger-ui',
deepLinking: true,
docExpansion: 'none',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
CustomTopbarPlugin
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui
}
function CustomTopbarPlugin() {
// this plugin overrides the Topbar component to return nothing
return {
components: {
Topbar: () => null
}
}
}
window.onload = function() {
loadUI("./swagger.json");
}
</script>
</body>
</html>
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
This doesn't seem like a complicated plugin at all but I can't get this to work - it's driving me crazy. Any help would be appreciated. I'm sure i'm missing some Monday detail.
Here's the url: http://damon9.com/dev/DC/
Clicking the Resume button should slide the page right
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide.js"></script>
<script type ="text/javascript"> <!--- I've tried both of these below and some others -->
$("a#resume_btn").pageslide({ direction: "right", modal: true });
$("#resume_btn").pageslide();
</script>
</head>
<body>
<div id="modal" style="display:none">
<p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
<p>Close</p>
</div>
</body
css
#pageslide {
/* These styles MUST be included. Do not change. */
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/* Specify the width of your pageslide here */
width: 400px;
padding: 20px;
/* These styles are optional, and describe how the pageslide will look */
background-color: red;
color: #FFF;
-webkit-box-shadow: inset 0 0 5px 5px #222;
-moz-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}
Try to put
<script type="text/javascript" src="js/jquery.pageslide.js"></script>
before the tag
</body>
Try this,
<script type ="text/javascript">
$(function(){
$("a#resume_btn").pageslide({ direction: "right", modal: true });
$("#resume_btn").pageslide();
});
</script>
This code works in every other browser I've tried, except IE8.
IE8 appears to ignore the z-index - and the pop-up becomes a pop-under.
It's in the right place, just renders underneath the thumbnail.
Anyone?
Thanks!
HTML:
<a class="thumbnail" href="#thumb">
<img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
style="float:right; margin-top:10px;margin-bottom:10px;"
alt="description" />
<span>
<img src="/images/comic_a3_popup.jpg" />
</span>
</a>
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
}
The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}
Put these lines in your page head
<!--[if IE]>
<style>
#your_faulty_div{
background-color:#000; /*any color it doesn't matter*/
filter: alpha(opacity=0);
}
</style>
<![endif]-->
your_faulty_div is the div which is misbehaving due to IE z-index bug.
Works smooth , i use it in all of my projects where i have positioned elements overlaping.
If I understand you correctly, you want the span to show above the element marked as the thumbnail. You have not specified the z-index for the span element. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Pop-up Test</title>
<style type="text/css">
#vbox {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
z-index: 0;
}
#vbox:hover #hbox {
display: block;
}
#hbox {
border: 1px solid blue;
display: none;
height: 200px;
left: 50px;
position: relative;
top: 50px;
width: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div id="vbox">
<p>Hover over this box to show a hidden "pop-up".</p>
<p id="hbox">This box is a pop-up.</p>
</div>
</body>
</html>
The way to fix this issue is by adding a class to the thumbnail image like this:
.thumbnail:hover img.thumb {z-index:-50; position:relative;}