How to make DOJO CheckedMultiSelect text wrapped and how to enable horizontal scrolling in the same control, if the select text is larger that the control size
All you need is to overwrite CSS rules. See working example at jsFiddle: http://jsfiddle.net/phusick/qrSWu/
For both of your needs you need to limit the width of dojox/form/CheckedMultiSelect. It can be done adding narrow class to the markup <select data-dojo-type="dojox/form/CheckedMultiSelect" class="narrow"> or JavaScript (via className):
.narrow .dojoxCheckedMultiSelectWrapper {
width: 100px;
}
For horizontal scrolling add also scroll class (class="narrow scroll"):
.scroll .dojoxCheckedMultiSelectWrapper {
overflow-x: scroll;
}
For wrapping the option text add wrap class (class="narrow wrap"):
.wrap .dojoxMultiSelectItemLabel {
white-space: normal;
}
.wrap .dojoxMultiSelectItemBox {
vertical-align: top;
margin-top: 3px;
}
Depending on the order you include stylesheets you may need to add !important.
Related
I have a dynamic p-table with columns that auto-adjust their sizes. I also want the table header to stick in place when scrolling a page. In my current attempt, setting the autoLayout property to true and making table header sticky don't work simultaneously.
Is there a way I can make the table header stick and at the same time maintain the autoLayout property?
Inside the p-table tag in the HTML file, I have [autoLayout] ="true"
And I have this is #Component:
styles: [`
:host ::ng-deep .ui-table .ui-table-thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
#media screen and (max-width: 64em) {
:host ::ng-deep .ui-table .ui-table-thead {
top: 0px;
}
}
`]
I am using Vuetify and Electron to make an app to help me with certain tasks at my job. I have disable the browserWindow frame and made my header the draggable area with a button to close the window. I am using the electron vuetify template
vue init vuetifyjs/electron
My problem is the scrollbar reaches all the way to the top but I would like it below my fixed header.
I have tried playing with overflow properties on the html, body, app div, and content div tags but i have not been successful.
How would I accomplish this?
This is purely a CSS question really as you can see this behaviour in the browser too with similar layouts. The easiest way to fix this is using a flex layout:
HTML:
<div class="container">
<div class="titlebar"></div>
<div class="content">
<h1>So much content we scroll</h1>
<h1>So much content we scroll</h1>
<!-- etc -->
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.titlebar {
background-color: blue;
height: 35px;
flex-shrink: 0;
}
.content {
flex-grow: 1;
overflow-x: auto;
}
Check out this out in this CodePen
I'd like to offer a Vuetify specific answer for this question, this should apply whether or not Electron is involved.
Vuetify's default styles make this a bit more difficult than a simple CSS solution can give you, especially when the layout gets more complex.
For this example I'm using the complex layout from Vuetify's pre-defined themes here
Vuetify ships with an overflow-y: scroll on the html element so the first step is adding an override for this.
html {
overflow: hidden;
}
This will get rid of the bar on the right side that spans the whole height of the app.
Next you will want to set your v-content area as the scrollable area. There are a few gotchas to watch out for when you're setting this area:
Display flex is already declared
Vuetify sets padding in the style attribute so you'll need to override depending on your case
You'll need a margin the height of your header(only matters if you're changing header height from 64px)
You'll need to remove the header height from the height of the content container using calc(Same as above)
If you have a nav drawer on the right side you'll need to bind a class to take care of this.
My CSS for v-content looks like this, you will need an important to override the padding since it is set by Vuetify through style binding:
main.v-content {
width: 100vw;
height: calc(100vh - 64px);
flex-direction: column;
overflow: scroll;
margin-top: 64px;
padding-top: 0 !important;
}
I also have a class bound to the state of the temporary right drawer on the v-content tag in the template, this makes sure that the scroll bar doesn't disappear underneath the right nav drawer when it's open:
<v-content :class="{ draweropen: drawerRight }">
And the CSS for that bound class, once again you'll need an important to remove the default right padding Vuetify puts on v-content when the drawer is open:
.draweropen {
width: calc(100vw - 300px) !important;
padding-right: 0 !important;
}
You can optionally set the flex-direction to column-reverse if your content is bottom loaded like a chat which is what I'm doing in this CodePen Example
I built a little component that wraps the v-main and moves the scrollbar to the main container instead of the default (the entire html).
Simply replace v-main with this and you're done.
<template>
<v-main class="my-main">
<div class="my-main__scroll-container">
<slot />
</div>
</v-main>
</template>
<script>
export default {
mounted: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = 'hidden'
},
destroyed: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = null
},
}
</script>
<style>
.my-main
height: 100vh
.my-main__scroll-container
height: 100%
overflow: auto
</style>
I'm using datatables with the bootstrap 4 styling framework. I'd like to make the filter input take up the full width of the page. Currently I'm doing this by overriding the dom configuration to remove the pagination div, then applying styles to the label and input elements (code below) but this feels like a bit of a hack. Is there a better way of doing it?
$("#table").dataTable({
"dom":
"frtip",
...
"paging": false
});
#table_filter label {
width: 100%;
}
#table_filter input {
display: block;
margin-left: 0;
width: 100%;
}
In HTML/CSS if you want an absolutely positioned element to expand wider than its parent to fit all its text in one line, you can use white-space: no-wrap
.parent {
position: relative;
width: 100px;
}
// text content of this node is wider than 100px
.child {
position: absolute;
white-space: nowrap;
}
The child element will grow just wide enough to fit all the text in one line. There doesn't be a way to do this with Text components in React Native. You have to specify a fixed number width or the Text component will max out at the parent width. Is there a way?
Figured out that the answer is quite simple.
Text wrap can be specified with the <Text> component's built-in interface called numberOfLines, instead of CSS.
<Text numberOfLines={1}>Foobar</Text>
The documentation for this can be found here.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>