setting nav-sm on body for making sidebar take least real state on any layout , it works on desktop size, but for tablet it does not hide it like nav-md or on phone it does not hide it like nav-md used to. what is the best way to set side-bar menu to take least real state as possible for any screen size.
Just change your body class from "nav-md" to "nav-sm"
So this will be the code:
<body class="nav-sm">
//
// your page content
//
</body>
You should be aware of classes in all dom element to have a responsive site, not just in body tag.
Related
I know we can adjust orientation of print page on widow by below CSS code
#media print {
#page {
size : landscape
}
}
But after I implement this code with import from 'print.css',
Chrome hides the selection option of layout and fixes to only landscape.
Because of this phenomenon, other pages which don't need to adjust their layout are forced to print out with the landscape option.
Is there any way to set only the targeted page printed out horizontally?
Like can we remove CSS option right after printing out the targeted page is printed out or target a specific area with id or class name?
I have been suffering from this problem for almost 1 week :(
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
is it possible to make the v-dialog have dynamic width? Currently the v-dialog by default has dynamic height which makes it shorten and lengthen depending on the length of content.
But can this be done with width?
I have a v-dialog that contains 4 tabs. 3 of those tabs don't require much width but the last tab contains a table so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
Vuetify v-dialog: https://vuetifyjs.com/en/components/dialogs
Setting width to "unset" seems to work, haven't discovered any negative side effects yet.
<v-dialog v-model="dialog" width="unset">
<YourDialogContent></YourDialogContent>
</v-dialog>
or CSS
.v-dialog {
width: unset;
}
For Desktop
so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
For desktop, we can set dynamic width for v-dialog based on contents inside the dialog easily, by manually setting the width="auto " (with extra space).
<template>
<v-dialog width="auto ">
...
</v-dialog>
</template>
For Mobile
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:
<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Final Version
We can combine both the logics into one like:
<template>
<v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Working Demo | Code Pen
On Desktop
If we open the dialog using the click me button, we can see the dialog has a small width as the content of tab 1 & 2 is very small. But if we click on tab 3, which has a large data table, you can see the dialog width and height automatically increases. You can toggle between tabs and can see this again.
On Mobile
If you open this demo on mobile, you can see the dialog is opening in full-screen by default and the width is constant.
Write custom css rules and not set width or max-width props. e.g.:
I use a custom class in order to not apply rules to all v-dialog:
<v-dialog v-model="dialog" content-class="v-dialog--custom">
<!-- dialog content -->
</v-dialog>
And create your custom rules:
.v-dialog--custom {
width: 100%;
}
/* Desktop */
#media screen and (min-width: 768px) {
.v-dialog--custom {
width: 50%;
}
}
You can see this on codepen: https://codepen.io/hans-felix/pen/BajByxx
Are you talking about this part?:
<v-dialog
v-model="dialog"
width="500"
>
If so, why just don't remove the width="500" part and leave without one? I tested and it stretches dynamically. This option is not required and nothing is breaking if you remove it.
In case I misunderstood something, please feel free to add more details.
I think, what are you searching is the fullscreen (bool) property or depending on the needs the max-width (Number) property.
By setting one of those you control the width of the v-dialog depending on the surrounding element. The surrounding element width can be adjusted via css, e.g. flexbox.
Use what scientists are using.
Make width as a computed variable, and then return your value based on the breakpoints.
If you want to set width dynamically based on the contents in the dialog then just modify the width function to return the width based on the contents.
Copied from vuetify site: LINK
<v-dialog v-model="dialog" :width="width">
<v-img src="~~~"></v-img>
</v-dialog>
<script>
...
computed:{
width() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
}
},
}
</script>
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->