I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..
<div class="ui-btn ui-input-btn center_BTN " >
<input type="button" id="save" data-inline="true" value=" Save" data-icon="check" />
</div>
CSS
.center_BTN {
text-align:center;
background-color:transparent !important;
border:none;
}
.center_BTN.ui-btn,.center_BTN .ui-input-btn{
border: solid #cccccc 5px;
border-radius:32px !important;
}
Update
jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.
<input type="button" data-wrapper-class="foo" />
Demo
Old answer
jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.
Create a custom class with all your CSS and add it after page is created.
$(".selector").closest("div").addClass("custom-class");
Demo
Rounded rectangle button
.ui-btn-corner-all {
border-radius: 1m;
}
Rectangle button
.ui-btn-corner-all {
border-radius: 0m;
}
Related
On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
I'm having trouble with the JQuery UI accordion widget. I can get the accordion working and the icons showing for a collapsed and expanded accordion, but I get all of the icons and not just the +/- icon.
When collapsed
When expanded
Here is my driver for the JQuery widget
$(function () {
$('.accordion').accordion({
"header" : "h3",
"icons": {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
},
"heightStyle": "content",
"collapsible": true,
"active": false,
});
});
here is the HTML it is being called on
<div class="accordion">
<h3></h3><!--Left blank to show all the icons showing-->
<div>
<p>This is sample Content</p>
</div>
</div>
The JQuery-UI zip file I downloaded came with 6 files that contained all of the various icons available and it appears like the whole row is showing and gets shifted to the left to hide some icons when the accordion is either expanded or collapsed. Do I have to use the theme roller to roll my own theme and only get the icons I want or if there some height/width/offset settings I need to specify in the driver. I've tried to follow the documentation but it's not been exceedingly helpful.
It turns out there was a css collision between the JQuery UI css
.ui-icon {
width: 16px;
height: 16px;
}
and some css I was using for other parts of the site
.content span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
Since the <div class="accordion"> was nested within <div class="content"> the css for .content span was overriding the .ui-icon css because JQuery UI inserts <span class="ui-icon ui-icon-plus"> inside the header element to hold the icon.
I changed my css to be more exclusive and that resolved this problem.
/*Adding > fixed the error*/
.content > span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
I have a page on a project I'm creating for class where I wanted to align an image in the left side, with the text to the right aligned in the middle of the image. Instead of using html elements, I decided to try an internal CSS div elements within my external CSS. My problem is that I can't get them to align correctly vertically. I have the horizontal alignment, but the text either appears one line above or one line below the image. I tried the techniques included in this posting, but they didn't fix my problem. Align <div> elements side by side
Here is my internal CSS.
<style type="text/css">
/* left div holding the image */
#left {
width:170px;
align:left; }
/* right div to hold the text */
#right {
margin-left: 200px;
text-align:left; }
</style>
Here's the HTML
<div id="content">
<br/>
<br/>
<br/>
<blockquote>
<div id="right">Check back soon. Click here to receive an email when the site becomes available.</div><div id="left"><img src="images/construction-clipart.jpg" border="1" alt="Page under construction" /></div>
</blockquote>
</div>
Can you help me figure out how to make these align? To view how it is rendering, please visit my student project site at http://www.student.nvcc.edu/home/ligomes/TwoWiredChicks/Browse.html.
Thanks!
Finally, I hope this helps now. All you have for the right css is:
#right {
position: absolute;
margin-left: 200px
}
I am using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
I am experiencing a very odd bug with Chrome 17.0.963.56. Following is a screenshot:
When the page first renders, the Salutation combobox looks fine. However as soon as you check the checkbox above, the weird image appears. Clicking anywhere on the page then causes it to go away. Unchecking the box causes it to appear again. I tried to repro in jsfiddle, but could not.
I found 2 different ways to make this bug go away. The first has to do with the HTML and CSS structure of the combobox:
<div class="field ui-helper-clearfix #Html.IdFor(m => m.Salutation)-field">
<span class="label">
#Html.LabelFor(m => m.Salutation)
</span>
<div class="input">
<div class="combobox">
<div class="text-box input">
#Html.EditorFor(m => m.Salutation)
</div>
<a class="text-box down-arrow">
<img class="text-box down-arrow" alt=""
src="/content/icons/transparent.png">
</a>
<div class="autocomplete-menu">
</div>
</div>
<div class="messages">
<div class="top callout border">
<div class="top callout bg">
</div>
</div>
<span class="validation">
#Html.ValidationMessageFor(m => m.Salutation)
</span>
</div>
</div>
</div>
.combobox .text-box.input {
position: absolute;
left: 0;
right: 20px;
border-right-color: transparent; /* was border-right-width: 0; */
border-right-width: 0;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
Basically, the border comes from a div wrapper around the input element. The input itself has no border. For normal text box wrappers, the border radius is 5px. However for the combobox, I override that CSS value to give the top & bottom right corners a radius of zero. This is to make it blend into the drop-arrow element for the combobox.
When I completely remove the right border on the textbox wrapper (using border-right-width: 0;), the anomaly appears. When I instead keep the right border and give it a transparent background color, the anomaly goes away.
However I also discovered that removing /content/themes/base/jquery.ui.all.css made the problem go away. Trial and error led me to the following line in jquery.ui.theme.css:
.ui-widget :active { outline: none; }
When I remove this line, or change it to .ui-widget:active { outline: none; } (note the absence of the space between widget and :active) the problem also goes away -- even with the text box wrapper having a right border width of zero.
This issue does not occur in Firefox, IE, or Safari 5.1.1 (7534.51.22), only in the Chrome version mentioned above. So it seems it could be a Chrome bug.
I have never seen a state selector used with a space like that before. Most of the time, things like :hover, :link, :active, etc, come immediately after the selector. Does the jQuery UI selector above mean "apply outline:none; to all :active elements nested beneath a .ui-widget element"? Or does it mean "apply outline:none; to all :active .ui-widget elements"? If there is no difference by removing the space between .ui-widget and :active, I would prefer that solution over making the text box wrapper right border transparent instead of giving it a width of zero.
Another odd thing is that the Suffix combobox is not affected -- yet it uses the same exact CSS and HTML structure as the Salutation combobox. Weird...
Is there a difference between .ui-widget :active and .ui-widget:active?
There is. .ui-widget :active means "an active successor of an element with the class "ui-widget". .ui-widget:active means "an active element with the class "ui-widget".
Provided that other browsers render this case correctly, I suggest reporting a bug against Chrome (preferably, give a reduced test case): http://new.crbug.com