This is the part of the HTML file of my Angular project, where I am using a checkbox with an input groups addon
<td
style="width: auto; word-wrap: normal"
class="text-wrap"
>
<fieldset>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div
class="input-group-text"
style="height: 30px"
>
<input
type="checkbox"
id="checkbox-addon1"
class="form-check-input"
/>
</div>
</div>
<input
type="text"
class="form-control"
placeholder="Compare data"
style="height: 30px; width: 80px"
/>
</div>
</fieldset>
</td>
When seeing this on desktop, it is showing in a correct way -
But when the same thing I am seeing in mobile view, I see like this
In mobile view, checkbox and text are not coming in the same line. Can anyone please help me to resolve this issue?
Edit 1:
I have defined the heading of this table column as
<th style="width: 9em" scope="col">Compare data</th>
Edit 2:
Based on what #HAPPY SINGH answered,
I tried using the below part of code, in my scss file
.input-group {
white-space: nowrap;
.form-control {
width: 50px !important;
padding-left: 0%;
padding-right: 0%;
}
}
But as soon as I change from width: 40px, the mobile view breaks again
Yes,
Use this few style CSS and remove inline CSS added in external CSS.
Mobile view media query:
#media only screen and (max-width: 767px) {
.input-group {
white-space: nowrap;
}
.form-control {
width: 40px;
}
}
Use this:
<div class="input-group mb-3" style="white-space: nowrap">
or
<div class="input-group mb-3" style="display:flex">
to disallow wrapping.
On the other hand, it is likely that .input-group already does this. Your elements are contained in a table column, and table will always display all of its columns, even when there is not enough screen space available, which is likely why the layout breaks. Rather than using tables for layout, prefer a flexbox approach instead.
Try this:
<div class="input-group mb-3" style="display: flex;">
Related
I'm trying to use a <fieldset> to group some controls. No matter what I do I can't get the border to display. My understanding is it should display by default. In the <style> I've tried setting border-width:1px which does nothing and border:solid draws a border outside of everything including the <legend>. I've tested in both Firefox and Chrome and no difference. What am I missing? Here is an example of my code. I'm playing with different layouts so ignore the inconsistency.
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Project Basics</legend>
<ul>
<li>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</li>
<li>
<label for="txtDescription">Description</label>
<textarea rows=3 cols=20 id="txtDescription"></textarea>
</li>
</ul>
</fieldset>
</div>
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Cost Estimations</legend>
<label for="txtEstTotalHrs">Estimated Total Hours</label>
<input type="text" id="txtEstTotalHrs" />
<label for="txtEstLaborCost">Estimated Labor Costs</label>
<input type="text" id="txtEstLaborCosts" />
</fieldset>
</div>
And this is what I'm seeing, no borders.
Update to comments:
Mushroomator, yes I am using bootstrap. Are you saying to add the whole bootstrap css to the snippet? And I am the designer of the project.
Mike K., Agreed, I am not seeing whats in the plain snippet so something is being overwritten. I wasn't very clear but I did look at the what styles are being applied and at the Fieldset level, if I change the Border setting to 1px it draws an outside box around the fieldset. I added an image from the dev tools.
*JonoJames, I tried adding styling to the tag like this <fieldset style="border-color:black !important; border-style:solid !important"> and I still see nothing. When I look at the dev tools, it shows those attributes set at the Element level but nothing changes on the front end.
This should be a simple problem.
Testing Update: I found the references to the bootstrap css in the _Layout.cshtml file so I started commenting them out , one at a time. The offender seems to be <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> The only reference to fieldset, other than fieldset:disabled, is in this line.
fieldset{min-width:0;padding:10rem;margin:10rem;border:10rem}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}#media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}
I've tried setting all properties to something other than zero but no effect. settings like "10px" or "25rem". Anytime I do get a border, its always an "outside" border like this:
You could add a custom border with CSS
.fieldsetColored{
border-color: #F00;
border-style: solid;
}
<fieldset class="fieldsetColored">
<legend>box</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<label for="txtEstTotalHrs">Estimated Total Hours</label></br>
<input type="text" id="txtEstTotalHrs" /></br>
<label for="txtEstLaborCost">Estimated Labor Costs</label></br>
<input type="text" id="txtEstLaborCosts" /></br>
</tr>
</table>
</fieldset>
You probably have a conflicting style sheet somewhere that turns the border off If its bootstrap use the !important CSS override style attribute
!important
looking at the class list <div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
This looks like bootstrap
Finally figured it out. According to this discussion Fieldset legend does not work everything is turned off for fieldset borders in Bootstrap 5. To get the original alignment of the Legend (inline with the border) you have to set the Legend float:none; and width:auto;
My final CSS looks like this:
fieldset {
margin-bottom: 1em !important;
border: 1px solid #666 !important;
padding:1px !important;
}
legend {
padding: 1px 10px !important;
float:none;
width:auto;
}
Thanks for all your input. Reading through your replies a couple times helped me with my troubleshooting.
This should work!
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3">
Your Title
</legend>
<p>Your content</p>
</fieldset>
I have the following inside my asp.net core MVC view:-
<td>
$<input asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
where I am trying to display a $ sign beside an <input> on the same line, but currently, my above code will show the $ on a separate line as follow:-
Any advice on how I can show them on the same line?
My guess is form-control has the style display:block; and width:100%
Remove the above styles or override it using custom css below
.form-control.tablecellcustom {
display: inline;
width: auto;
}
I think your code internally uses Bootsrap. This is a guess, might be wrong. If its internally using Bootstrap you can try using input group also.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>
I suspect your input is display block so you need to have a wrapper for your input and use flex box to achive this.
.form-control-wrapper {
display: flex;
align-items: center;
}
.form-control {
margin-left: 5px;
}
<div class='form-control-wrapper'>
$ <input class='form-control' />
</div>
The code you posted works as desired. Seems like you didn't post the CSS which is applied.
Anyway, make sure the input element has display: inline or inline-block to appear in one line with the "$" symbol before it.
You can put value in the input value.
You can set a variable in value, also concatenate the string with $ before putting it
You can also set a label for that input then style it in CSS to be in the same line
<td>
<input value={} asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>
This is embarrasing. Im making use of the Datebox module and I'm trying to align a label next to an input just like the examples in the provided link.
I'm expecting something along the lines of this:
but get this:
This is from my HTML:
<div name="activities" id="activities">
<label for="activity-1">Activity 1</label>
<input name="activity-1" id="activity-1" type="date" data-role="datebox" data-options='{"mode": "durationflipbox", "overrideDurationOrder": ["h","i"], "overrideDurationFormat": "%Dl:%DM"}'/>
</div>
I've tried setting styles in the CSS
#activities {
display: inline-block;
vertical-align: right;
}
but I'm not getting the expected result given above.
What am I doing wrong?
UPDATE
It seems that HTML is being inserted when loading the page so the final result looks like this:
I apologize for inserting an image instead of code, but I can't seem to copy the HTML in a legible way.
Anyway, here it is if you want to copy/paste it:
<div name="activities" id="activities">
<label for="activity-1" class="ui-input-text" style="vertical-align: middle;">Activity 1</label>
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"><div class="ui-input-datebox ui-corner-all ui-body-c" style="border: none;"><input name="activity-1" id="activity-1" type="text" data-role="datebox" data-options="{"mode": "durationflipbox", "overrideDurationOrder": ["h","i"], "overrideDurationFormat": "%Dl:%DM"}" class="ui-input-text ui-body-c" readonly="readonly"><span class="ui-btn-inner"><span class="ui-btn-text">Open Date Picker</span><span class="ui-icon ui-icon-grid ui-icon-shadow"> </span></span></div></div>
</div>
Your code works for me: http://jsfiddle.net/Lera/HEeHd/
What browser are you using?
I can also get the same results without the CSS. Just your HTML:
<div name="activities" id="activities">
<label for="activity-1">Activity 1</label>
<input name="activity-1" id="activity-1" type="date" data-role="datebox" data-options='{"mode": "durationflipbox", "overrideDurationOrder": ["h","i"], "overrideDurationFormat": "%Dl:%DM"}'/>
</div>
Try to set some styles to your label like this:
#activities label {
position: absolute;
top: 16px;
left: 10px;
z-index: 1;
}
Fiddle
I've realised it is due to jQuery Mobile CSS.
how to make the city state zip to align in the same line
i reduced the width but its not working
how to fix it
<div class="">
<label class="" for="">City</label><input style="width: 54px;" type="text">
<label class="" for="">State</label><input style="width: 54px;" type="text">
<label class="" for="">Zip</label><input style="width: 54px;" type="text" >
</div>
http://jsfiddle.net/VXXPC/19/
Your labels are display: block. Use display: inline-block like you have with the fields.
This took me all of about 10 seconds to realise with the browser developer tools. Hitting [F12] in most modern browsers (FF requires installation of FireBug) launches the bundled developer tools. Here you can inspect the offending element(s) and see the CSS that effects the element(s).
Here's an updated fiddle. I've applied a class to the parent div inline-fields. In the CSS I've added:
.inline-fields label {
display: inline-block;
}
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo