I have an issue with displaying the label value for the <h:commandButton>. For example, please see the below code
<td align="left" style="float: left;">
<h:commandButton value ="Reset Demand To Default" styleClass="refresh-button-style" />
</td>
I have created the styleclass for this button and the code for the styleclass is specified below.
.refresh-button-style
{
word-wrap: break-word !important;
background-color:#2996EF;
height:40px;
width:100px;
font-size:13px;
text-align: center;
font-family: Arial;
}
When I try to run the xhtml file and disable the label value, The label value seems to get displayed horizontally. It does do the wordwrap and hence displays only part of the button label. Can you please let me know how to achieve the wordwrap for the button and display the entire label value within the command Button.
Try the following css attribute:
white-space:normal;
This should wrap the text as expected (source).
Related
I have a JQuery UI progressbar and so far I have gotten it to work if the screen size is large. However, I am stuck on how to make both the progressbar and the progress showing inside to shrink and adjust to different screen sizes.
Below is my simplified code for the JQuery UI progressbar to show. In my real code, my value does change, but, even if I set it to a fixed value, it doesn't work anyways.
HTML
<div id="progressbar"></div>
CSS
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
JS
$('#progressbar').progressbar({
value: 37
});
As you can see, I have a value of 37. However, when I try to shrink the browser width, the progress bar just fills it up such that the value changes to 100.
The progress in the progress bar not responding to each other
I have tried searching solutions up but none works. I tried setting width: 100% and/or wrapping the progress bar in another div, etc, but none to do not work.
I really expected that it keeps it filled up at only 37% of the entire progress bar even when I shrink the size of the window, just like how it is on the JQuery's link: https://jqueryui.com/progressbar/.
Practice with the following.
$(function() {
$('#progressbar').progressbar({
value: 37
});
$("#setWidth").change(function() {
$(".progress-wrapper").css("width", $(this).val());
});
});
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div><label>Set Width</label><input type="text" id="setWidth" /></div>
<div class="progress-wrapper" style="width: 100%;">
<div id="progressbar"></div>
</div>
The jQuery UI Progressbar is designed to be responsive. Change the window here and you should see that both the border and the inner element shrink responsively.
You can also change the width of the parent, by typing in a value in the field above, like 40% or 240px and it will do the same.
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;
}
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 have started to use the PrimeFaces p:editor for text input and for the most part I am fairly pleased with how it works. However the documentation notes that the CKEditor on which it is based does not plug into the ThemeRoller framework so the components dimensions do not adjust automatically.
So for example:
<h:panelGrid columns="2">
(stuff)
<h:outputLabel value="Content:" />
<p:editor id="editDoc" widgetVar="editorDoc"
value="#{editDocument.text}"
style="width: 700px"
/>
(more stuff)
</h:panelGrid>
I would like the p:editor to expand to the width of the table that h:panelGrid renders. Yet nothing I have tried works. Any suggestions?
UPDATE:
I should note that the p:editor tag pays no attention to the style attribute. Instead it has a width attribute and a height attribute and they don't work the same way the CSS parameters would work. For example width="100%" is an error.
The actual width of the p:editor depends on the size of its inner <div>. You can simply overwrite that default value:
<style type="text/css">
#editDoc > div {
width: 99.5% !important;
}
</style>
also remove the style="width: 700px" of the p:editor and attach it to the h:panelGrid instead.
A more general solution which applies to all p:editor components is to overwrite the default width attribute of the .ui-editor class:
<style type="text/css">
.ui-editor {
width: 99.5% !important;
}
</style>
For Primefaces 4, we have to set the width of the inner iframe:
<style type="text/css">
.ui-editor iframe {
width:100% !important;
}
</style>
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