I've started a blank project with Ionic 3 and the default style is not applying to the buttons.
I'm using a default button with
<button ion-button>Prueba</button>
But I get this
Am I missing something?
UPDATE
Using
<ion-button block color="primary">Acceder</ion-button>
Fix the problem but I notice that is not using full width in the div than contains the button
<div padding>
<ion-button block color="primary">Acceder</ion-button>
</div>
Not sure where is the problem
Related
I'm using tailwind css to style a little angular app, the problem is:
i want my form to have a fixed position at the bottom of the page but it seems that classes like "top-100 left-50" are not working
home-component.html
<main class="container bg-green-200 h-full m-auto">
<app-search class="fixed top-100"></app-search>
<app-fruits-cards></app-fruits-cards>
</main>
searchbar-component.html:
<form *ngIf="searchForm" [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="bg-slate-100 rounded p-3">
<label for="searchInput">Search</label>
<input formControlName="fruitName" type="text" id="searchInput" class=""/>
<button type="submit" class="rounded-full">search</button>
</form>
I actually tried to use the "top-100" class into the form element directly but it still doesn't work, what am I doing wrong here?
Try adding position relative to the container
Also i'm not sure about top-100 ...
check here what values are allowed with the classes of top ..
https://tailwindcss.com/docs/top-right-bottom-left
There is no default defined class top-100 the most near to it is top-96 but you can define your default in tailwind.config file or use custom value like top-[100px]
Read about:
Adding arbitrary values here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
Defining classes in the config file here: https://tailwindcss.com/docs/configuration
I am building a search UI in Angular 8 with the Angular Query Builder module.
The Angular2 query builder module is working correctly. I am customizing the styling for Angular Material following the customization instructions in the documentation. I am using Angular Material and Angular FlexLayout for the styling.
I want to move the "remove" button (the red X) all the way on the RIGHT side of the flex row, to the right of the "value" field.
The flexLayout settings should be showing all of the elements side-by-side in order. However, some sort of style is being applied that places it on the left side despite being the last element in the flex row. I have tried margin-left and other styles but was not able to figure out how to get the X to go all the way to the right side.
Here is the stackblitz:
https://stackblitz.com/edit/angular-aqyt4u?file=src/app/app.component.ts
Here is the snippet of markup for the customization of the remove button:
<!-- Query Builder -->
<query-builder [(ngModel)]='recordsQuerySet' [config]='config'>
<!-- Override remove button -->
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<div fxFlex>
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
<mat-icon>clear</mat-icon>
</button>
</div>
</ng-container>
<!-- etc -->
</query-builder>
You can add a custom class to remove rule button then set its position absolute, some thing like below:
In html file:
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)" class="remove-rule-btn">
<mat-icon>clear</mat-icon>
</button>
In css/scss file:
.remove-rule-btn{
position: absolute;
right: 5px;
}
css problem with ion-select that has a button inside a shadow root. I need the default value --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px for this, but it is a first element and assumes the value applied as shown below.
below image contains color box which is ion-select and unable to control size of this box.code for ion-select is below. Can someone help me?
<ion-col size="2" style="padding:0">
<div class="colorselect color_{{color.slice(1,7)}}">
<ion-select >
<ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >{{optioncolor}}
</ion-select-option>
</ion-select>
</div>
</ion-col>
Try this one.Its works for me
ion-select{
--padding-top:12px !important;
--padding-end:12px !important;
--padding-bottom:12px !important;
--padding-start:20px !important;
}
Try this package for shadow-dom elements. Works perfectly fine.
Search for Shadow-DOM-inject-styles on NPM. It let's you style shadow elements
I am using bootstrap 2.0 within my rails app (using the bootstrap-sass gem) and am having trouble getting a submit button aligned with a cancel button.
Here's the code snippet from the form in the html.erb file:
<div class="span3">
<%= f.submit class: "btn btn-primary" %>
<button type="button" class="btn">Cancel</button>
</div>
Here's the HTML it produces:
<input class="btn btn-primary" type="submit" value="Add Person" name="commit">
<button class="btn" type="button">Cancel</button>
And here's what it looks like in firefox 14.0.1. When I look at the
Note: Adding input-append to the div gets me close (see pic below) but is still off a bit--note that cancel is still a bit lower and that the rounded corners on the right side of the add person button are cut off.
How can I get these two buttons to align properly?
Update
I am using Firefox 14.0.1. When I look at the jsfiddle created by #Vestride to duplicate this problem here's what I see:
I am happy with the first result, but when I add the exact same code to my site, I don't get the same result. Instead I get the messed up alignment above. I wonder what this means? Maybe that my CSS for bootstrap is messed up?
Update 7/27
In response to Vestride's latest suggestion, here are the buttons as they show in my Firefox from the fiddle Vestride put together. Note, there's no improvement with changing from input to submit.
I made a jsfiddle http://jsfiddle.net/Vestride/YT3sq but was unable to duplicate your problem. They align perfectly for me (Chrome 21). What browser are you using? In the second example I added a btn-group class to the container element. That might also solve your problem.
Edit:
Try making your <input /> a <button type="submit">. Worked in Firefox for me. I updated the fiddle too.
I know it's an old issue, but using Bootstrap 4 I had the same problem. What solved it for me is adding margin-bottom: 0 or mb-0 class using bootstrap classes on the submit button.
I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.
My Requirement is:- JSF button with Background image and a Icon
Following code am using to add background.
<!-- Discard button-->
<h:commandButton action="discard" style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; " value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
Can somebody help me in adding a icon to the button too please.
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.
So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.