Seriously, How do you make TailwindCSS button group span the full witdh ?
For simple buttons, you could use btn-block, but that wont work once you start using button groups.
Okay as, i was righting this I found the answer, but still went ahead to publish this, cause I didnt find answers else where....
So I ended up using tailwind witdh classes documented here
<div class="btn-group">
<button class="btn w-1/2 btn-outline btn-primary ">Save</button>
<button class="btn w-1/2 btn-outline ">Cancel</button>
</div>
so the class w-1/2 gives a 50% width, i'm using this caus I have only 2 buttons in my button group, so you should adjust accordingly depending on the number of buttons.
The draw back with this technique, is that it can become complex if you want to add buttons dynamically. put still doable.
Related
I'm trying to adjust FABs in Ionic to make them scrolling with my content. If we refer to the Ionic Exemple :
<ion-fab top right edge>
<button ion-fab mini><ion-icon name="add"></ion-icon></button>
<ion-fab-list>
<button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
</ion-fab-list>
</ion-fab>
The result is the following :
I'd like to make this FAB scroll with the content. I tried to overrider Ionic CSS, but when I change the position attribute it makes my button disappear..
Thank you in advance for any help
You can't because the case here is not css. Ionic adds the FAB button to the fixed-content class, so even knowing you can use css to manipulate both the fab and the fixed-content it does't scroll along with the scroll-content (i've tried here to find a solution for you).
Manipulating the DOM maybe works, taking out the fab from fixed-content and placing it in scroll-content with ElementRef, ViewChild, Renderer from #angular/core (haven't tried this yet).
Along with manipulating the DOM, the other solution is creating your own FAB button, it can be a hard work, but there must be some examples around the internet.
Hope this helps.
I am using ionic to create a mobile app and on one of the pages, I have my header bar set to transparent and an image is the background.
I have a default back button which is white colored. However, if the image behind it is something like this https://newevolutiondesigns.com/images/freebies/white-wallpaper-8.jpg then the button won't show.
Here is the mark up in question:
<ion-header-bar align-title="left" class="bar-clear">
<div class="buttons">
<button class="button button-icon ion-arrow-left-c" ng-click="goBack()"></button>
</div>
</ion-header-bar>
<ion-content scroll="true" class="no-header my-view">
<ion-slide-box class="item-slide-box">
<ion-slide ng-repeat="post in vm.post.images" ng-cloak>
<img class="img-ng" ng-src="{{image}}">
</ion-slide>
</ion-slide-box>
For a start, you could try getting the dominant color of the background image like this.
Next, based on the color, if the color lies beyond a certain range (defined by you), you can set an appropriate class to the button. The class would specify if the background is white or black. This isn't specifically a LESS solution, but you can modify your LESS theme based on this. Like calling less.modifyVars() and reassigning the variables.
I want to customize bootstrap button and add two small images in the button itself to make it look like button.
Here is the image preview:
Image Link
Have you tried
<button type="submit" style="background-color:red;"><img src=""> Button<img src=""></button>
It seems simple enough
I am using Twitter Bootstrap 3. I need to populate a "row" with a search bar and two buttons. My problem is the row do not stretch to the entire width of the page.
Here is what it looks like:
<div class="container-fluid">
<div class = "row">
<div class = "col-md-8">
<form>
<input type="text" id="searchbar" class="form-control" placeholder="Search XXX">
</form>
</div>
<div class="col-md-4" >
<button type="button" class="btn btn-primary">Create AAA</button>
<button type="button" class="btn btn-primary">Create BBB</button>
</div>
</div>
Even if I make the cols as 9 and 3, the buttons stack up in the next row. I tried btn-group, same result. I want create AAA and Create BBB buttons to float to the right. Is there any css class I could use from Bootstrap 3 or should I write customized css?
Bootstrap's grid system uses percentages to denote the size as X/12, where X = the number provided (so if you use col-md-4, it will be 4/12 = 33%, or width: 33.33333333%). This results in the buttons/text field will not auto-expanding to fill the rest of the space, as the intended operation is to not stretch.
If changing the columns to 9 and 3 causes the buttons to drop to the next row, you can keep the columns as 8 and 4, and add the following style to the div containing the buttons (whether you make it an inline style [not recommended] or create your own css class is up to you):
text-align: right;
This will move the buttons to the right, as float: right did not work. The search bar and buttons will move with the browser size, however the gap between the search bar and the buttons will still be around since we have moved the buttons to the right-hand side.
Bootply: http://www.bootply.com/YDmOVoWvN3
When I have an element associated with a Twitter Bootstrap Tooltip and the Tooltip will overlap outside the browser window, it tries to realign within the window but it misaligns vertically (i.e. the top alignment of the tooltip is now centred rather than above the target element)
Has anyone encountered this before and if so, what was the work around/fix/update?
Yes, others have encountered this before. For example, Issue #4125: Bad position of tooltip or Issue #3556: Tooltips near edge of window don't activate properly.
In the former it is suggested to either disable text wrapping or set a fixed height.
In the latter it is suggested (rather jestingly - but nevertheless potentially useful) to set a different positioning on tooltips you know are going to be near the window edge. E.g., placement: 'left' or placement: 'right'.
At this point there doesn't seem to be any impetus toward getting this handled in the repo.
I have experienced this issue and found the following.
Caused the issue
<a href="https://www.facebook.com/ComfortEstatePlanning" data-toggle="tooltip"
data-placement="bottom" title="" data-original-title="follow us on Facebook"
><i class="fa fa-facebook-official fa-lg fa-2x pull-right"></i></a>
Note the pull-right class is on the i tag
<a href="https://www.facebook.com/ComfortEstatePlanning" data-
toggle="tooltip" data-placement="bottom" title="" data-original-
title="follow us on Facebook" class="pull-right"><i class="fa fa-facebook-
official fa-lg fa-2x"></i></a>
Solution is to put the pull-right class on the a tag