I know that Vuetify.js has horizontal v-toggle-btn. Is it possible to make it vertical ?
Here is an example of horizontal v-toggle-btn
Thank you for the information from AndrewHarvey
It appears in one of the newer releases the class named changed, it's now .v-btn-toggle
Since Vuetify defined .btn-toggle's display as inline-flex, you can simply add
.btn-toggle {
flex-direction: column;
}
to your stylesheet to achieve vertical display of button items.
Check pen here
Related
I'm trying to make an screen with Arabic text in it. It is basically a big that include smaller components nested into it. (the container is like the page, while the smaller ones are parts that need their own even handling onPress...etc).
I want to make the text shown in justified way with lines starting/ending uniformly. So I went to the parent and added this style:
textContainer: {
direction: "rtl",
textAlign: "justify",
},
and it works really fine except the last line, it starts from the left instead of the right. So, is there a way to tell the to justify and also make the last line start from right?
Here is how it looks(https://pasteboard.co/JMDRj1e.png)
if you look at the last line it starts from left and not from right, I think this is a bug in react native.
The following worked for me,
For iOS, I gave the text style writingDirection: 'rtl' and by importing #import <React/RCTI18nUtil.h> in AppDelegate.m, added these two lines in didFinishLaunchingWithOptions: ,
[[RCTI18nUtil sharedInstance] allowRTL:TRUE];
[[RCTI18nUtil sharedInstance] forceRTL:TRUE];
and for android you can refer here, How to set direction property of a View to RTL in React Native. Also, you need to add transform: [{scaleX: -1}] and flexDirection: row-reverse.
Your implementation will only align the first line. in order to align an Arabic paragraph / or more than one line, you can do the following:
import I18nManager from react native in your app.js
import { I18nManager } from "react-native";
then add this line below the import to allow RTL
I18nManager.allowRTL(true);
finnaly you can add writingDirection: "rtl" to the style of the arabic text and it should be aligned the correct way
is there any alternative to the depricated"HorizontalDivider" in SAPUI5? Since Sap doesn´t mention any alternative, I ran over something like "" Element that draws a Horizontal line?
It is better that you use a toolbar element as it has the bottom border. When you use the html hr tag, it does not respect the theme color while the toolbar use the theme color and also its spacing policy.
<sap.m.Toolbar width="100%" height="1px"/>
It the following picture you can see what is the result of using a toolbar with 1px height.
And in the following picture the result of using html hr tag.
Or you can use any boxing elements of the UI5 and just play with its class. For example you can assign the class sapMTBStandard to your element to make a bottom border with suitable color in your theme.
<html:hr></html:hr>
Make sure you add xmlns:html="http://www.w3.org/1999/xhtml" library
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
I found how to make a vertical Accordion in Metro UI.
But I would like to make a horizontal one.
Is it possible? If so, how do I proceed please?
if I understood correctly then in the link you provided by adding the following css to the first div.cell:
.cell{width: 100%;}/*the div container containing the frame classes*/
.frame{float: left;}
.frame .heading, .frame .content{width: 200px;};/*you can choose the width you prefer but I guess they have to be the same width*/
you will get something like this:
You could also enable overflow in the '.frame .content' class if need be. Hope it helps.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).