I would like to know, how to place a label next to the multiselect or textarea at the top ? For example I have this code
<div class="form-group">
<label class="control-label" for="SelectId">label</label>
<select name="SelectId" id="SelectId" style="min-width: 604px;" size="5" multiple="multiple">
<option value="0">No Selection</option>
...
</select>
</div>
which looks like at the picture
Only solution I found is with relative positioning, which works but broke when browser window is resized.
<div class="form-group">
<label class="control-label" for="SelectId">label</label>
<select name="SelectId" id="SelectId" style="position: relative; top: -75px;" size="5" multiple="multiple">
<option value="0">No Selection</option>
...
</select>
</div>
Any idea ?
With vertical-align you are able to position inline elements based on the other inline elements in the same line.
.control-label {
vertical-align: top;
}
label and select are both display: inline by defaut.
Related
I have the following code on my page for dropdown list box. No matter how much I try, I cannot make the width of the dropdown box bigger. Below is my code:
<div class="form-group row">
<div class="col-sm-1"> </div>
<label for="inputTitles" class="col-sm-3 col-form-label"><asp:Label ID="lblDocType" runat="server"></asp:Label></label>
<div class="col-sm-8">
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
I tried to put this style sheet in the asp:DropDownList class:
<style>
.ddlwidth {
width: 1000px !important;
}
</style>
<asp:DropDownList class="form-control ddlwidth" ID="ddlDocType" runat="server" OnSelectedIndexChanged="DocType_Changed" AutoPostBack="true" Width="700" >
That didn't work either. If I remove the form-control and then increase the width of the dropdownList then the width becomes bigger. The reason, I don't want to remove the form-control class because I want to keep the look and feel of form-control class.
How can I increase the width of the dropdownlist box without removing the form-control class?
Below is what it looks like on my web page:
Try this in your style sheet:
.form-control {
width: 394px;
And then:
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div align="center" class="form-group">
<select v-model="subject" class="form-control">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
<br>
Bootstrap takes the full width for the select drop down by default.
I want it to be set to get the width what it requires.
How do I achieve this?
You can make it possible by giving width for that specific class like
<div align="center" class="form-group">
<select v-model="subject" class="form-control">
<option v-for="n in papertypes">{{ n.type }}</option>
</select>
</div>
.form-group select.form-control {
display: inline-block;
width: 300px;
}
Check the codepen link
Also please notet align attribute is deprecated in HTML5. So if you want to align the content to center. Bootstrap has classes for that. Like text-center in Bootstrap3, we have justify-content-center in Bootstrap4.
Add the class w-auto to .form-control
<div align="center" class="form-group">
<select v-model="subject" class="form-control w-auto">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
<br>
you can add "custom-select" class for select.
<div align="center" class="form-group">
<select v-model="subject" class="custom-select">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
I recently started to use bootstrap RC2 and jquery select2, but if I use it with bootstrap form-control class I get unexpected margins and looks weird.
Could someone please give me a hint on this?
html
<div class="form-group">
<div class="col-lg-6 sepereate-group">
<select name="gender" id="gender" data-placeholder="Select gender" class="form-control select2">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
<div class="form-group">
<div class="col-lg-6 sepereate-group">
<select name="gender" id="gender" data-placeholder="Select experience" class="form-control select2" >
<option></option>
<option value="1">No experience</option>
<option value="2">Some experience</option>
<option value="3">Experienced</option>
<option value="4">Very experienced</option>
</select>
/div>
</div>
Okay solved, removed the form-group class from the select tag and
and defined select2 this way
$(".select2").select2({ width: '100%' });
I ran into the same problem and found this library. Works like expected!
Hi I am trying to change the css for a select element, and it works fine in firefox but it doesnt work in google chrome. When I tried to use the Chrome Developer tool, I see that under Styles/Matched CSS Rules the elements height is successfully changed to 30px but when I go to Computed Style the height shows up as 18px but when I click the arrow to get more information it shows that the height should be 30px
#new-job select - 30px
I am new with html/css and chromes developer tools, but it seems like it should be working to me. Here is my code
<div id="new-job">
<form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="vfKmC+vnnIl/6icDIbDRfZghNR927qmEqTdB9I2OeMQ="></div>
<div class="field">
<label for="job_category">Category</label>
<select id="job_category" name="job[category]"><option value=""></option>
<option value="Bistro Card">Bistro Card</option>
<option value="Dongle">Dongle</option>
<option value="Return">Return</option>
<option value="Catering">Catering</option>
<option value="Other">Other</option></select><br><br>
</div>
<div class="field">
<label for="job_location">Location</label><br>
<input id="job_location" name="job[location]" size="30" type="text">
</div>
<div class="field">
<label for="job_description">Description</label><br>
<textarea cols="40" id="job_description" name="job[description]" rows="20"></textarea>
</div>
<div class="actions">
<input class="button small radius" id="submit-job" name="commit" type="submit" value="create job">
go back
<div id="new-job-errors"> </div>
</div>
</form>
</div>
And heres my CSS
#new-job {
select {height: 30px;}
}
the correct syntax should be
#new-job select {
height: 30px;
}
To select the select element you can use the assigned id, or the tag itself.
An example of both is here - http://jsfiddle.net/9HndG/
In your css, it would look like this:
by id
#job_category{
height:30px;
}
by tag
select{
width:200px;
}
by both
select#job_category{
height:30px;
}
add some style in your <select>
<select id="job_category" name="job[category]" style="height:30px;">...
I'm working with Twitter and have pulled a list of all my followers and their screen names down using the API. I'm trying to display them in a nice 'grid' on my web page. However, it currently looks like this:
The issue happens when the person's screen name is so long that it goes on to two lines. I don't know why it sometimes puts a single person on a line like that...
Here's my CSS code:
div.inline {
float:left;
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}
And the HTML code:
<div class = "inline">
<?php echo $userName; ?><br>
<?php echo "<img src = ".$userImage." class = ".$class.">"; ?><br>
<select name = "choice">
<option value = "blank"></option>
<option value = "cool">Cool</option>
<option value = "uncool">Uncool</option>
</select>
</div>
Can anyone help? Perhaps there is a way to put in a blank line after the first line of their name or something if it's less than two lines long?
The reason someone is on a single line is because each div is different heights. Either wrap the username in an element (div for example) and set a height to that or set a height to the entire inline div. I think it would be nice to have the images aligned though, so the first option is best.
<div class="inline">
<div class="username"><?=$userName;?></div>
<?='<img src="'.$userImage.'" class="'.$class.'" alt="'.$userName.'" />';?><br />
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
For 2 lines use the following:
.username {
height: 30px;
line-height: 15px;
}
Increase height by line-height value for each line you want.
Try something like this:
<div class="inline">
<div style="height: 32px; line-height: 16px"><?php echo $userName; ?></div><br />
<img src=" <?php echo userImage; ?> " class=" <?php echo $class; ?> " /><br />
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
The divs height should be equivalent to two lines of text.
Specify a fixed height for the name and image. Your problem will be solved.
Update your markup as this:
<div class = "inline">
<div class="name"><?php echo $userName; ?></div>
<div class="image"><?php echo "<img src = ".$userImage." class = ".$class.">"; ?></div>
<select name = "choice">
<option value = "blank"></option>
<option value = "cool">Cool</option>
<option value = "uncool">Uncool</option>
</select>
</div>
And CSS to something similar.
.name { height: 30px; }
.image { height: 200px; }
A simple solution is to remove float:left and replace with display:inline-block, since you really do want inline elements (as kind of hinted at with your class="inline").
inline-block elements will naturally align to the text baseline, which means that longer names that spill onto new lines will push the vertical position of all elements down, therefore the person with the longest name will determine the vertical positioning of the other elements.
See demo or example code below:
CSS
div.inline {
display:inline-block;
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}
HTML
<div class="inline">
short-ish username<br/>
<img src="http://lorempixel.com/80/100/cats/1"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
name<br/>
<img src="http://lorempixel.com/80/100/cats/2"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
A really, really long username<br/>
<img src="http://lorempixel.com/80/100/cats/3"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
Short again<br/>
<img src="http://lorempixel.com/80/100/cats/4"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
V.short<br/>
<img src="http://lorempixel.com/80/100/cats/5"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>