I'm currently working on a project for a client who is creating a share tribe website which also incorporates bootstrap.
Here is the link.
You can view the source code on this website to see the code.
I have tried on the website to alter the css so that I can change the height of the input field, however my code in the index file doesn't change anything.
Also how do I go about changing the header bar at the top from white to have a clear background?
Also, I tried altering the css in the customstyles.css , and by manually inserting the `height="10px"' using 'inline css' however both of these didn't work.
Please let me know how to change the css to make this possible. Here is a JSFiddle too, to make it clearer:
JsFiddle Link
<div class="col-md-4">
<div style="display: table; margin: 0px auto">
<div class="input-group">
<input type="text" id="q" name="q" class="form-control" placeholder="Where are you going?" style="height: 10px">
<span id="submit" class="input-group-addon btn btn-success">Submit</span>
</div>
</div>
</div>
Easy as heck using jQuery if you have the option
$('.class').css('height','110px');
For multiple characteristics:
var params = ['height','width','text-align'];
var values = ['1000px','100px','center'];
for (p in params) {
$('#id').css(params[p], values[p])
}
Your customstyles.css is working good and its call on page,
You just need to change in the class
.marketplace-lander input[type=text] -> padding
parameter. padding is creating problem for you in some resolutions.
Related
I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the
<input type="time">
I want that the tabbing only hits the input area, not the icon next to it.
This is the current state:
example input field:
<div class="text-section">
<label for="startTime"
class="text label without-margin">#((MarkupString)loc["StartTime"].ToString())</label>
<div class="property-container-three">
<div class="property-icon">
<div class="icon solid start" tabIndex="-2">#Icons.Startzeit</div>
</div>
<input class="input-text nomargin centerInputContentVertical"
type="time"
id="startTime"
#ref="startTimeElement"
#bind-value="blazorStartTime"
#onblur="HandleStartTimeSet">
</div>
</div>
I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
padding: 8px 12px;
height: 38px;
width: 100%;
}
I do not have any more ideas or approaches...
After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.
I can only replicate this bug on Edge. And it seems MS won't solve it...
You can target it with CSS: idea from here
input[type="time"]::-webkit-calendar-picker-indicator` {
display: none:
}
Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?
Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.
The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.
Maybe in future this sort of feature will be introduced and there will be a working answer for it....
I'm trying to get rid of the spacing between my input and the buttons to the right of it. Usually, the last resort is to override all the styles by adding an inline style in the tag, overriding everything else. However, I noticed that (a) it doesn't seem to affect the page and (b) the spacing actually gets bigger for smaller screen width.
My conclusion based on that (and some googlearch) is that Bootstrap uses JavaScript to dynamically set the styles to adapt to screens of different sizes. That's great but it gives me only limited control over how the controls are placed.
I'm guessing it's an awesome feature generally speaking but at the moment I'm only interested in Bootstrap's looks, not the layouting. How do I effectively override that? In the future I'll need to apply the layouting so I can't just remove it.
<div class="input-group date form_datetime col-md-5 "
style="border: solid red 1px;"
data-date-format="dd M 'yy - hh:ii"
data-link-field="myDate">
<input class="form-control"
style="border: solid yellow 1px;"
size="16" type="text" value="" readonly>
<span class="input-group-addon" style="border: solid blue 1px;">
<span class="glyphicon glyphicon-remove "
style="border: blueviolet 10px;">
</span>
</span>
<span class="input-group-addon" style="border: solid orange 1px;">
<span class="glyphicon glyphicon-th"
style="border: solid orangered 1px;"></span>
</span>
</div>
<input type="hidden" id="myDate" value="" />
The actual question is how to in the above markup deactivate/override the spacing between input and spans without removing Bootstrap.
Could it be as easy as alternating one of the classes? I've read on some guides but wasn't enlighten, exactly. Likely not because of the docs being wrong, hehe.
Part of the issuing you are experiencing is the use of media queries in Bootstrap that control the style of various elements. That is why they get wider on smaller screens. Media queries are a CSS feature.
The likely reason that your inline styles are not working is because Bootstrap uses !important statements.
NOTE: Please don't interpret Bootstrap's use of !important as a sign to use !important carte blanche yourself. It is considered against best practice to use !important when ever you feel like it. Specificity should be used before !important. Once one has gained enough experience, as the Bootstrap team likely has, then you'll know when it is acceptable to use !important or not.
As for the spacing between input elements and spans I'm not exactly clear on what that is. I take it as you want to remove some of the padding on the spans around the glyphicon spans.
Something like:
.input-group-addon {
padding: 6px 0;
}
Demo JSFiddle.
I am creating a small simple web app and having some trouble creating the radio buttons I want.
I want the user to be able to decide whether they want to input the dollar value or a percentage, that would then be used to calculate a dollar value.
I want the input text box to look similar to this example:
Here is a codepen example:
CodePen Example
How can I get the radio buttons to be right on top of each other in bootstrap? Or will I need to resort to custom css to get it done?
input elements are by default displayed as inline;
You need to use display:block for them to show one on top of the other.
.input-group-addon input{
display:block;
}
You'd also need to give a specific class to this input-group so you'll be able to use this layout specific to that class only and not all input-group-addons
Since it is BootStrap, you could always wrap your radio boxes inside BootStrap classes like such. Or display block but the input height will stretch height further than adding bootstrap divs.
<div class="col-sm-12">
<div class="col-sm-12">
$<input type="checkbox" aria-label="...">
</div>
<div class="col-sm-12">
%<input type="checkbox" aria-label="...">
</div>
</div>
I've digged a lot but still didn't found answer for my case.
I have some model window, inside of it I have some textarea:
<div class="form-group">
<label for="groupDescription" class="col-sm-2 control-label">
Description: </label>
<div class="col-sm-10">
<form:textarea path="groupDescription" cssClass="form-control" />
<form:errors path="groupDescription" />
</div>
</div>
It automatically have the same width as input forms in this window, this is good. But! I can resize it, so it can be outside of modal window borders.
How can I disable this width resizing? For length I would like to set some option like "length is 2 rows, but no more than 10 rows". Can you help?
Also, can I do it without JavaScript?
Thanks in advance! :)
P.S. Sorry, I've needed to edit title.
You can use resize: vertical;, this will allow vertical resize only.
To prevent the textarea from resizing you can simply add the CSS attribute to your textarea class resize: none; .
Apart from this <form:textarea> has no difference with the html textarea , it rendered as normal textarea in the browser. you can check that by inspecting it the browser source.
You can use resize: vertical; to allow only resizing its length
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.