The typeahead suggestion box goes down - its a drop down list. How can I make it go up so that the base of the suggestions box is at the top of the text field?
Like this for example...
I managed this by removing the following from the template:
top: position.top+'px',
This from my CSS:
top: 100%;
And adding the following to the CSS:
bottom: 38px;
Where 38px is the height of the text box. Unfortunately the top declarations had to be removed because there's no way as far as I know to unset top without using script and it takes precedence over bottom.
I own the CSS and I can put the template in a separate file that overrides the default so I won't lose my changes.
Related
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
Angular Material form fields are potentially very convenient because they add a bunch of classes to the surrounding element depending on whether the field is selected, empty, filled, etc. I want to use these classes to customize the style of the label and other custom elements placed inside the field container (example: making the label change color when the input is focused).
The problem is that Angular Material also adds a bunch of other properties, styles and elements that I don't want to deal with. Even if I add floatLabel="never" and floatPlaceholder="never", the placeholder is still removed from the input and turned into a label, which is positioned relative to the entire container. If I place other elements inside the mat-form-field element (like a regular label), this messes up the positioning of the placeholder-turned-label, causing it to appear outside the input.
Is there any way I can make Angular Material not turn the placeholder into a label, but just leave it as a normal placeholder?
So I wasn't able to actually fix it properly, but I was able to get around the issue by adding styles to undo the style changes that Angular adds.
mat-form-field.mat-form-field-hide-placeholder .mat-input-element::placeholder{
color: #ccc !important;
-webkit-text-fill-color: #ccc !important;
}
mat-form-field.mat-form-field-hide-placeholder .mat-form-field-label-wrapper{
display: none;
}
It would be nicer if there was a way to not have the .mat-form-field-hide-placeholder class added in the first place, but until someone figures this out this will have to do.
Turns out all you need to do is add appearance="none" to the field tag, e.g.:
<mat-form-field appearance="none">
<input matInput [(ngModel)]="email" placeholder="Email">
</mat-form-field>
I read through the Trix documentation and an answer did not jump out at me for this. It appears that the Trix WYSIWYG editor defaults to 3 displayed rows:
Any chance this can be toggled to more rows, for example: 15 or so rows:
It is a matter of setting the min-height css attribute. Using javascript, this works if you only have one trix-editor on the page:
$('trix-editor').css("min-height", "350px");
If you have multiple trix editors on the page and you only want to change the default height for that one: what I did is I wrapped the trix editor in a div, set a class on that div, and used find:
$('.solution-trix-field-wrapper').find($('trix-editor')).css("min-height", "350px");
Yes, you are right, but I have solved the different way.
You can be overriding the default CSS like trix-content class
.trix-content{
height: 350px;
}
you can increase the height using this CSS if you want to use scroll after some depth then overflow-y: auto; like
.trix-content{
height: 350px;
overflow-y: auto;
}
after 350px it will automatically add the scrollbar.
Where should I add the code?
Try adding it to your stylesheets/application.scss file (if you're using sass - or equivalent files).
In rails 7 I had to override the min-height of the trix-editor element. Code in app/assets/stylesheets/actiontext.css
trix-editor {
min-height: 15em;
}
This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 7 years ago.
I'm trying to make what I thought would be a minor change to the CSS / SCSS in Bourbon in my Rails 4 website.
I'm simply trying to create more margin between my submit button and the "go back" link. At the moment the two elements are too close together as shown in the image below:
I've tried to solve this in a number of ways, both using my own standalone style sheet and within the Bourbon "source code" itself.
First I attached this class and tried this in my own plain app.css file, but element only shifted right slightly, no top margin:
.go-back-link {
margin: 20px 20px 20px 20px;
}
Then in Bourbon's _typography.scss file I tried adding margin to the a section, again no result:
a {
#include transition(color 0.1s linear);
color: $base-link-color;
text-decoration: none;
margin: 20px;
&:hover {
color: $hover-link-color;
}
&:active, &:focus {
color: $hover-link-color;
outline: none;
}
}
Third in _variables.scss I tried changing the line height property from 1.5 to 2, but this changed everything else on the page but has nothing to do with the a link element:
// Line height
$base-line-height: 1.5;
$header-line-height: 1.25;
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!
try using !important, for example :
margin: 20px !important;
As highlighted by #cinnamon this has little to nothing to do with Neat/Bourbon/Sass/Rails while more to CSS.
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!
Indeed.
You're currently trying to style an inline element, such as an anchor.
For more information, I'd strongly suggest reading the visual formatting model of CSS 2.1 which is quite comprehensive.
In order to solve this problem of yours you need to change the display mode of your anchor, which will then bring in the needed spacing you're requiring.
I'd also suggest to target the element with its own class, rather than using the generic global selector.
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag