I may customize input fields (change font, size, etc) in p:inputText, p:autocompelte, p:inputMask, but I have no idea how to change input text field for p:calendar.
Using .ui-datepicker-sth works fine for elements from the panel, but I can't find anything for changing input text field in p:calendar element.
Can anyone help me, pls?
Mi.
To change the width of the input field for the p:calendar, the following worked for me using Primefaces 5.1.
I defined this in the CSS file:
.calendarClass input {
width: 50px !important
}
The p:calendar component style class is set as:
<p:calendar id="fromdate" styleClass="calendarClass" .../>
To change the width of the input field for the p:calendar you can use
<p:calendar inputStyleClass="dateTimeField" .../>
.dateTimeField{
width: 200px;
}
or
<p:calendar inputStyle="width:200px" .../>
or
<p:calendar styleClass="dateTimeField".../>
.dateTimeField input {
width:200px;
}
https://forum.primefaces.org/viewtopic.php?t=2610
In this case, as #Matt indicates, you should overwrite the ui-inputfield class. For example, to remove the border radius or the shadow (the same with the focus):
.ui-inputfield {
border-radius:0px;
box-shadow: none;
}
And then add your properties (border, font-size/weight...) to make the class to your liking.
You can use size attribute directly for changing the size
The generated html for the Primefaces calendar input field looks like this (copied from the showcase):
<input id="form:popupCal_input" name="form:popupCal_input" type="text"
class="ui-inputfield ui-widget ui-state-default ui-corner-all
hasDatepicker ui-state-hover" role="textbox" ... >
So you need to adapt / overwrite one or more of the given classes to change the input field. Maybe you need to combine your css selector with the generated id to change the calendar input only and not all other input fields.
This worked for me with p:calendar in inline mode:
CSS:
.calendar .ui-datepicker-inline{
width: 100% !important;
}
HTML:
<p:calendar styleClass="calendar" mode="inline" locale="pt_BR".../>
Related
I'm using the ag-grid-community:^24.1.0 and ag-grid-react: ^24.1.1in the react application. When I set the rowHeight as 25, it is displayed as shown below.
<div className="ag-theme-alpine" style={ { height: 400, width: 600 } }>
<AgGridReact rowSelection="multiple"
rowData={rowData}
rowHeight={25}>
...
</AgGridReact>
</div>
I tried setting
div.ag-theme-alpine div.ag-cell{font-size: 12px !important;vertical-align: middle;} as told in some other posts but there is no change.
However, when I remove the following property from the developer tool, it starts appearing fine.
I want to set the uniform rowHeight(other than the default). How can this be achieved?
You can set the row height to be static in the gridOptions or via the property rowHeight={25} the way you did.
However, agGrid also has a hardcoded value for the line-height that makes the rows only accept single line text.
changing the lineHeight, to something you prefer is the way to go if you want to start changing the rowHeight in addition to the fixed value.
Note: rowHeight field values don't work at all if you are in the infiniteRow model that is commonly used for server-side pagination because agGrid has problems calculating rowHeights and gridHeights if it doesn't know the full extent of the rows data.
if you want to change the lineHeight on all cells you can use the defaultColDef attribute cellClass and pass a class that forces the lineHeight
EDIT: here is how I do it,
in the defaultColDef object :
defaultColDef: {
....
cellClass:'cell-wrap-text',
....
}
then define that class like this:
.cell-wrap-text{
white-space: normal !important;
line-height: 23px !important;
}
the whitespace line will make your text break and go back to line, since agGrid doesn't allow that by default.
after doing so, you can set the rowHeight in the react component like you already did.
Wanting to leverage some of the built in functionality (date validation, etc) of react-day-picker while not offering the calendar overlay (offering the user an input field without the calendar overlay).
I'm not seeing any options in the docs to show only the input field without the calendar overlay.
Am I missing something?
Maybe a hacky way but I can see that you can provide custom prop classNames to the DayPickerInput component. Source
And you could provide an object like
<DayPickerInput>
classNames={{
overlayWrapper: 'myCustomClass'
}}
/>
.myCustomClass {
display: none;
}
or if you can hide the default class for the overlay wrapper
.DayPickerInput-OverlayWrapper {
display: none!important;
}
Nope, looking into the source but it's open source. You can copy the file and remove the parts you don't need.
I am using the Ant design components for React.
I would like to fixe the size of the multi selection input fields in order to have the selected values into the same line without taking a new line like is the default behavior :
https://ant.design/components/select/#components-select-demo-multiple
I need to have the values ranged into the same line.
I can fixe the size of the input fields by overriding the style
.ant-select-selection--multiple:before, .ant-select-selection--multiple:after {
display: inline !important; }
But when I select several values, then they are outside the inputr field.
Finally I found a solution by adding this css style options :
.ant-select-selection--multiple
{
white-space: nowrap;
height: 30px;
overflow: auto
}
Thus the div is looking like an input text field and when the content ground a scroll appear at the right side of the div field.
You can specify maxTagCount
<Select
mode="multiple"
maxTagCount={1}
>
// here is rendering of the Opitons
</Select>
I am trying to create a responsive image wrap gallery. Each image will have a header. I distribute them using column-count of webkit.
The problem is this: I've specified a container to be "relative". Inside that container, I have an "absolute" header followed by an image. What seems to be happening in some values of column-count is that the header is going to another column and the image in the next. I need them both to be together at all times and I'm surprised why the absolute within relative container is not doing that.
A codepen for reference: http://codepen.io/pliablepixels/full/YwWLzy/
The core image gallery code is:(SO insists I include a code fragment when posting a codepen link, so here goes)
<div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
<span ng-repeat="image in images">
<div style="position:relative">
<div class="my_header">Header</div>
<img class="scaled_image" src={{ image.src }} />
</div>
</span>
</div>
Please change the column values and note the header behavior.
How does one solve this? (Note I must use an img tag - can't use background-image)
thanks
Columns
To protect elements from breaking and keep them entirely in a column you can add these properties:
.element {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
Your fixed example http://codepen.io/anon/pen/rxMWxa
Header
Such behaviour occurs because you've added line-height:0px to your container div. So you can just return header's line-height value to normal. Fixed that in codepen.
Using line-height sometimes can make headache. Try to use padding like below:
.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}
I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>