I'm creating a form using the react-bootstrap Form component, and want a checkbox as one of the fields, but it looks like this:
The code that leads to this is really straightforward:
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="I agree to the terms and conditions" />
</Form.Group>
I'm sure I could fix it with some css hack, but it shouldn't be doing this. Any ideas how to solve it?
I figured it out: another css file was setting margin: 0 auto !important; on all input elements (a good example of why !important is dangerous).
Bootstrap tried to set the checkbox margin to shift it left, but that css was overridden by the other file. I changed the offending css to use a class selector instead, and it works now!
To anyone having a similar issue, the way I figured this out was that I:
Examined the css for the checkbox in developer tools
Saw that some fields (namely margin) were crossed out
Filtered for all instances of margin
Noted the css file that those instances came from
Related
I am working with Angular 7.
I am facing a problem in setting the z-index to the list of the user that are coming with auto-suggestion.
I am using a text box in which if I type # then it will give suggestion for all the available users.
for this functionality, I am using Angular mention directives but I am not able to set z-index when all users are coming.
I want to set up z-index to the coming user's list so that it should not hide. it should come and show the complete list.
below is my code that I am using for auto-suggestion with Angular mention directives.
<textarea #cName cols="30" [mention]="items" [mentionConfig]="{ labelKey:'name'}" rows="1" style="z-index: 1 !important"></textarea>
css file:
textarea {
border-radius: 8px;
}
with the above code, it is giving the following result attached in the below image.
So in the above image, we can see that the list is hiding behind the accordion but I want to see the complete list of the users.in the code, I have applied z-index in the styles but it is not working.
can anyone help me to come out of this problem?
Thanks in Advance.
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.
I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.
E.g. here: http://jsfiddle.net/j7b9A/2/
<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>
<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.
A comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?
Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.
Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.
I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?
What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
all you need is... add this
textarea.ui-input-text { height: inherit !important}
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.
Demo
CSS solution:
.custom_class {
height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
$('textarea').css({
'height': 'auto'
});
}, 0);
JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.
If you want to override that size when it's empty, you have two options:
Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.
The other is to override the default class, as seen in this answer.
I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+
Text area content auto scroll when more lines. max-height as you wish.
Add css
textarea.size{max-height:30px;}
<textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
You can use this : data-autogrow="false"
like this :
<textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.
need some help to style 2 datepicker on one site in different styles.
Want a different background in the second datepicker...
Tried to wrap the datepicker in seperate div, but doesnt work.
Even <%= Html.Telerik().DatePicker().Name("DatePickerStart").InputHtmlAttributes(new {#class="datepicker2"});%>
doesnt work..
but .InputHtmlAttributes(new { style = "width: 200px;" }) resizes my datepicker.
What do i wrong?
One possible solution is to use the t-animation-container class to modify the css properties.
But exists a better solution, especially when using more datepickers?