I'm creating a simple ASP.net MVC form using bootstrap. My form looks like:
#using(Html.BeginForm()){
<div class="row">
<div class="col-md-4">#Html.TextBox("City", "", new { placeholder = "City" })</div>
<div class="col-md-4">#Html.TextBox("State", "", new { placeholder = "State", maxlength = "2" })</div>
<div class="col-md-4">#Html.TextBox("Zip", "", new { placeholder = "Zip Code" })</div>
</div>
}
Although I'm using appropriate classes for columns and textboxes should be inline, they are appearing in different rows. To my understanding, as long as the column widths are within a limit of 12 columns, inline elements should appear in the same row. Why is there a line break between these elements?
N.B: If I remove divs for individual columns and put all textboxes in a single div, they appear in the same row correctly.
To my understanding, as long as the column widths are within a limit
of 12 columns, inline elements should appear in the same row.
Cut off for col-md-x is 970px. It means if the browser size is less than 970px, they will be rendered as individual row. You can read here.
If you always want them to appear them in a single row, you want to use col-xs-x, or mix classes like this -
<div class="row">
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
</div>
If you want your textboxes inline, they should be put inside a single div tag. but if you want to put it in different divs, you can try to remove "col-md-4" in your divs and use css instead, like this:
.row {
display: flex;
}
Also, add some extra "padding" or "margin" property for spacing between those textboxes.
If there is anything wrong about my answer, please feel free to correct it. Thanks!
Related
In the html below I'm having trouble getting the label and it's corresponding radio button to appear on the same line, what's the correct way to do this?
thanks
<div class="display-field">
#foreach (var value in Enum.GetValues(typeof(items.titles)))
{
<div class="display-field">
#Html.Label(value.ToString())
#Html.RadioButtonFor(m => m.title, value)
</div>
}
</div>
Try using LabelFor instead of Label
#Html.LabelFor
For more details, here is a tutorial for labels
http://www.tutorialsteacher.com/mvc/htmlhelper-label-labelfor
Set the label's CSS style to inline-block.
#Html.Label(value.ToString(), new { style = "display: inline-block" })
Without seeing the CSS for your page, the label element that is produced from your call to #Html.Label() is likely set to block level (display: block). Block level elements stack on top of each other and inline/inline-block level elements don't.
Please keep in mind that you should set the display value in your CSS and not by preference in the htmlAttributes value of your helper. You would do this by putting this (or something better targeted in your CSS file):
label { display: inline-block; }
How does one conditionally render an HTML element in Razor 2?
For instance, suppose I had the tag
<div class="someclass">
<p>#somevalue</p>
</div>
And I wanted to suppress the <-div-> tag from rendering if the value of #somevalue was equal to 1. Is there a simple way to do this in Razor similar to how I might "hide" the <-div-> tag with Knockout.js in a browser, where I might :
<div class="someclass" data-bind="showWhenTrue: someValue != 1">
<p data-bind="text: someValue"></p>
</div>
At the moment, the best Razor alternative I have is to do this:
#if (someValue != 1) {
<div class="someclass">
<p>#somevalue</p>
</div>
}
There are many ways to do this. First, it should be noted that your knockout code doesn't actually remove the html from output, it just sets its display to hidden.
The razor code you have actually removes the code from the rendered HTML, so that's a very different thing.
To answer your question, we need to know what it is you're trying to achieve. If you just want to hide the display, you can simply do something like this:
<div class="someclass" style="display: #{ somevalue == 1 ? #:"none" : #:"block" };">
<p>#somevalue</p>
</div>
You could also do it with a class:
<div class="someclass #{ somevalue == 1 ? #:"HideMe" : #:"ShowMe" }">
<p>#somevalue</p>
</div>
If you want to remove the code from the output, then you can just do what you've done.. i'm mot sure what you find so objectionable about it... but if you want other alternatives, you could create an Html helper, you could use a razor helper, you could use a Display or EditorTemplate....
The list is actually quite long and i'm just scratching the surface...
An elegant (and re-usable) solution is to write an extension method for Html to do conditional rendering of text ( a bit like IF() in Excel) - e.g.
public static MvcHtmlString ConditionalRender(this HtmlHelper helper, bool condition, string trueString, string falseString = "")
{
return MvcHtmlString.Create((condition) ? trueString : falseString);
}
You can then use it in your code as such:
<div class="someclass" style="display: #Html.ConditionalRender(somevalue == 1, "none","block")">
<p>#somevalue</p>
</div>
I want to select a set of elements as nodes (the content of div[#class="Adres"]):
<div class="KolumnaStyl">
<div class="Nazwa">ABCD</div>
<div class="Adres">
12-345 Warszawa
<br/>
ul. Krasnobrodzka 5
<br/>
Mazowieckie
This can be done with:
//div[#class="KolumnaStyl"]/div[#class="Adres"]/node()
As it happens, there are two identical div[#class="Adres"] on the page, which means that node() currently selects the content of both of them. I can't, however, call //div[#class="KolumnaStyl"][1] - that doesn't select the first occurrence.
How can I select a unique set of nodes if the parent directory exists multiple times?
Take a look at "XPath Get first element of subset".
Basically, predicates have higher precedence than the / and // operators.
So, (//div[#class="KolumnaStyl"]//(div[#class="Adres"]))[1] should return your desired result.
Also check out the spec for more background info.
If you want the first matched one, then do :
(//div[#class="KolumnaStyl"]//div[#class="Adres"])[1]/node()
In XPATH first means 1, not 0.
Here is a sample HTML :
<body>
<div class="foo">
<p> 12 </p>
</div>
<div class="foo">
<p> 112 </p>
</div>
</body>
XPATH expression:
(//div[#class = 'foo'])[1]
output
<div class="foo">
<p>12</p>
</div>
I want to show a piece of Razor markup as a text example on a page. I need to show following code (for example)
<div class="editor-wrap">
<div class="editor-label">
<text>
#Html.LabelFor( model => model.StartDate, new { data_tooltip_message = "Some text" } )
</text>
</div>
</div>
so I have regular Html plus Razor markup, I know that to show Html you have to wrap it with
<XMP>
tag, but Razor is parsing its markup anyway and is throwing exception where I want it only to display plain text. Thanks in advance
<XMP> is not recommended actually. Something like <code> or <pre> is preferred. Alternatively you can HTML encode the text so that it's rendered the way you expect on the page..
Update: Sorry, I see what your trying to do now. The tag only tells the browser to stop parsing HTML, but razor still tries to parse it's code because of the # character. To get around this escape the character by putting a second # in there.
<xmp>
<div class="editor-wrap">
<div class="editor-label">
<text>
##Html.LabelFor( model => model.StartDate, new { data_tooltip_message = "Some text" } )
</text>
</div>
</div>
</xmp>
I have a view with a bunch of elements in it.One of them (a div) is shown depending of a value that changes inside a select_tag (also within the same page).
I'm getting the selected ID from the select_tag element
$('#some_id').on('change',function(){
//$(this).val()
})
but then just don't know how to fetch the object and check for one of its properties and that way know if I should show the div or not?.
I thought of sending that id to the server...do whatever I need over there and then come back to the view and try something like this
<% if some_condition %>
<div>
...
</div>
<% end %>
This (of course) might not be the way.I'd be glad to understand how this happens
You way of doing it after getting some data from the server onChange of the select would work. You might also consider this approach.
But if you could pre-populate the divs and add a class or some other attribute it with which you could relate to the chosen option in the select field, then you can prevent the server call entirely.
<div class="opt1Val selectOptsDiv"> </div>
<div class="opt2Val selectOptsDiv"> </div>
<div class="opt3Val selectOptsDiv"> </div>
hide all these divs initially with css display: none;.
$('#some_id').on('change',function(){
var selectedOptionVal = $(this).find("option:selected).val();
$("." + selectedOptionVal).show();
})
But I guess you would be able to do this if the showing and hiding of the div's depend only on the selected option value and do not have to go through some other processing at the server end.