With Bootstrap3, stacking of radio buttons text is not happening properly in mobile(xs) view- bootply.
Screen shot:
As can be seen, text is not properly aligned to radio buttons in mobile(xs) view.
It is because of the .jumbotron line-height..
Try this:
.jumbotron {
line-height:20px;
}
http://bootply.com/101503
Related
I am using the CommandBar Component to display links. (The buttons are href links).
I want to remove the underline from buttons when hover. Is it possible? enter image description here
https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
If you want to remove the underline of a button when hover, maybe you can do something like this
button: hover{
text-decoration: none;
}
Let me know if that worked for you
#Shai According to the image below got from CleanMordern Project.
how can I style my radio buttons using CSS to look exactly as Shai did his,
and also make actions on each button to show different container when pressed
ButtonGroup barGroup = new ButtonGroup();
RadioButton all = RadioButton.createToggle("All", barGroup);
all.setUIID("SelectBar");
RadioButton featured = RadioButton.createToggle("Featured", barGroup);
featured.setUIID("SelectBar");
RadioButton popular = RadioButton.createToggle("Popular", barGroup);
popular.setUIID("SelectBar");
RadioButton myFavorite = RadioButton.createToggle("My Favorites", barGroup);
myFavorite.setUIID("SelectBar");
Label arrow = new Label(res.getImage("news-tab-down-arrow.png"), "Container");
add(LayeredLayout.encloseIn(
GridLayout.encloseIn(4, all, featured, popular, myFavorite),
FlowLayout.encloseBottom(arrow)
));
You can open the theme file in the designer tool and just copy the styling from there. I implemented this using image backgrounds to keep some pixels free for the arrow on the bottom.
If you look at the theme you will see I just placed a background image that's solid red on top and has a white bottom. Then I have a separate "arrow" image which is animated with the code to the selected button on every click. Everything else is just colors and fonts which is trivial.
I have a nav bar as shown as above. It is done using twitter bootstrap. However, there is alot of button.
Is it possible to make the whole nav bar scroll-able(via touch gesture) to see more buttons? (eg. right and left scroilable)
You might be able to apply this in your css:
.navscroll {
overflow-x: scroll;
to your navbar giving you the horizontal scroll.
I have created a nested list. When the text of the selected item is quite long than back button overlaps the toolbar title.
Is there any way to align toolbar text to right or set font size??
Any help is appreciated.
You can use only "Back" (or something else) for the back button. You just need to add this config in your nested list: useTitleAsBackText: false (It is true by default).
Else, you can reduce the font size for both button and toolbar title in your CSS file. Like this:
.my-nested-list .x-toolbar .x-button-label,
.my-nested-list .x-toolbar .x-title {
font-size: 13px;
}
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).